成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

彈性布局--flex方向

MkkHou / 2924人閱讀

摘要：方向方向由特性決定用于定義彈性布局模式。從左向右主軸水平方向交叉軸垂直方向。從下往上反向注意彈性布局不存在高寬水平垂直等屬性值。不會(huì)自己換行的，空間不夠會(huì)自動(dòng)伸縮。從左向右從上往下從右往左從下往上

flex方向

flex方向由flex-direction特性決定,用于定義彈性布局模式。flex-direction共有4種模式：從左向右、從右向左、從上往下、從下往上。

主軸

主軸的起點(diǎn)與終點(diǎn)定義了容器元素的開(kāi)始和結(jié)束邊緣。

交叉軸

交叉軸的起點(diǎn)與終點(diǎn)定義了容器的頂部與底部。

從左向右：flex-direction:row

主軸：水平方向；交叉軸：垂直方向。

?

?

從右向左：flex-direction: row-reverse（flex-direction:row的反向）

?

從上往下：flex-direction: column ?

主軸：垂直方向；交叉軸：水平方向。

?

?

從下往上 ： flex-direction: column-reverse（flex-direction: column反向）

?

注意：flexbox彈性布局不存在高、寬、水平、垂直等屬性值。盒子模型的大小終于由瀏覽器計(jì)算得到。flexbox不會(huì)自己換行的，空間不夠會(huì)自動(dòng)伸縮。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }

        .flexbox-row{
            display: flex;
            flex-direction: row;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-column{
            display: flex;
            flex-direction: column;
        }
        .flexbox-row-reverse{
            display: flex;
            flex-direction: row-reverse;
        }
        .flexbox-column-reverse{
            display: flex;
            flex-direction: column-reverse;
        }
    style>
head>
<body>

<div class="flexbox-row">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
<div class="flexbox-row">div>

<div class="flexbox-row-reverse">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column-reverse">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
body>
html>

?

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1185.html

相關(guān)文章

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁(yè)面所具有的元素可分為類。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    nemo 評(píng)論0 收藏0

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁(yè)面所具有的元素可分為類。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    luodongseu 評(píng)論0 收藏0

  • 我所知道的flex布局 —— 上篇

    摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。 前言 你還在用display+position+float來(lái)進(jìn)行css布局嗎？有沒(méi)有覺(jué)得用傳統(tǒng)的這種布局方法來(lái)實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來(lái)記錄一下自己對(duì)flex布局的了解（雖然不算神馬新東西了都可以說(shuō)是舊東西...

    andycall 評(píng)論0 收藏0

  • 彈性布局示例

    摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和或動(dòng)態(tài)因此單詞。主軸彈性容器的主軸是彈性項(xiàng)目布局的主要軸子項(xiàng)目默認(rèn)按照主軸排列。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。 原文章地址https://css-tricks.com/snippe...根據(jù)原文章翻譯并添加自己的理解，有不對(duì)的歡迎指正。 彈性布局-背景 Flexbox ...

    qqlcbb 評(píng)論0 收藏0

  • 彈性布局示例

    摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和或動(dòng)態(tài)因此單詞。主軸彈性容器的主軸是彈性項(xiàng)目布局的主要軸子項(xiàng)目默認(rèn)按照主軸排列。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。 原文章地址https://css-tricks.com/snippe...根據(jù)原文章翻譯并添加自己的理解，有不對(duì)的歡迎指正。 彈性布局-背景 Flexbox ...

    piglei 評(píng)論0 收藏0

  • 頁(yè)面布局 - flex彈性布局

    摘要：伸縮項(xiàng)，例如給子容器添加一個(gè)所有子容器的默認(rèn)都為，我們給第一個(gè)容器設(shè)置為時(shí)會(huì)產(chǎn)生類似于排序的效果伸縮容器 flex彈性布局 html： *{ margin: 0; padding: 0; ...

    liaosilzu2007 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<