Flex弹性布局以及box-sizing

(本篇内容代表本人理解，如有错误请指出！)

box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box

        <style>
           .cen{
               width:500px;
               height:250px;
               border: 5px solid red;
               box-sizing:content-box;
               background-color: darkcyan;
               padding: 0 50px
           }
        </style>
    </head>
    <body>
        <div class="cen"> width 和 height 属性包括内容，内边距和边框，但不包括外边距。</div>
    </body>

上图以及代码可以看出box-sizing值为content-box的时候，你所设的宽度而不是实际宽度了，而实际宽度是：width(所设置的宽度)+border+padding

border-box

        <style>
           .cen{
               width:500px;
               height:250px;
               border: 5px solid red;
               box-sizing: border-box;
               background-color: darkcyan;
               padding: 0 10%
           }
        </style>
    </head>
    <body>
        <div class="cen"> width 和 height 属性包括内容，内边距和边框，但不包括外边距。</div>
    </body>

从上图以及代码可以看出box-sizing的值为border-box的时候，设置的宽度已经包含border+padding+width

详细内容请查看MDN

Flex布局

任何一个容器以及行内元素都可以使用Flex布局。

.box {
  display:flex  
}

容器的6个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction:决定主轴的方向

        <style>
            body{
                display: flex;
                flex-direction: row;
            }
            div{
                width: 100px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>

<style>
            body{
                display: flex;
                flex-direction: row-reverse;
            }
            div{
                width: 100px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>

这里只演示2个属性值，一下是各值得含义：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 属性定义，如果一条轴线排不下，如何换行。

它有3个值当值为nowrap时不换行，也是默认值。

<style>
            body{
                display: flex;
                flex-wrap: nowrap
            }
            div{
                width: 100px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

举个例子；

      <style>
            body{
                display: flex;
                flex-flow: row-reverse wrap
            }
            div{
                width: 100px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>

justify-content属性定义了项目在主轴上的对齐方式。

有五个属性值

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

列举一个居中的例子：

<style>
            body{
                display: flex;
                justify-content: center
            }
            div{
                width: 100px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>

align-items属性定义项目在交叉轴上如何对齐。

有五个属性值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

举一个baseline的例子

 <style>
            body{
                display: flex;
                align-items: baseline
            }
            div{
                width: 200px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        <div style="font-size:5px">javaScript 1</div>
        <div style="font-size:25px">javaScript 2</div>
        <div style="font-size:35px">javaScript 3</div>
    </body>

flex-start

flex-end

center

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

列举居中的例子：

        <style>
            body{
                display: flex;
                width:100%;
                height:300px;
                border: 1px solid cadetblue;
                align-content: center;
                flex-wrap: wrap
            }
            div{
                width: 200px;
                height:50px;
                background-color: yellow;
                margin: 20px
            }
        </style>
    </head>
    <body>
        
        <div style="font-size:5px;height:50px">javaScript 1</div>
        <div style="font-size:25px;height:90px">javaScript 2</div>
        <div style="font-size:35px;height:70px">javaScript 3</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>

来源：https://www.cnblogs.com/webPang/p/8549302.html

标签

box-sizing

flex布局