css3弹性盒子——flex布局的四大属性——理论篇

引入弹性盒子的好处是让一个容器对子元素的排列、对齐、分配空白空间更加有效。

CSS3 弹性盒子内容

弹性盒子包含一个弹性容器，以及弹性子元素；默认情况下一个容器在一行显示

 <style>
        .flex-container {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .flex-item {
            width: 100px;
            height: 200px;
            margin: 10px;
            background-color: purple;
        }
    </style>

<div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

flex-direction:row|row-reverse|column|column-reverse

1. row,主轴方向是水平，排列从左到右
2. row-reverse 主轴方向是水瓶，但排列是从右到左
3. column 主轴方向是列，排列从上到下
4. column-reverse 主轴方向是列，排列从下到上

 <style>
        .flex-container {
            display: flex;
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            flex-direction: row-reverse;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .flex-item {
            width: 100px;
            height: 200px;
            margin: 10px;
            background-color: purple;
        }
    </style>

 <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

justify-content属性

justify-content:flex-start|flex-end|center|space-beween|space-around;
针对主轴方向上

 <style>
        .flex-container {
            display: flex;
            /* 紧贴着从左到右排列 */
            /* justify-content: flex-start; */

            /* 紧贴着从右到左排列 */
            /* justify-content: flex-end; */

            /* 紧贴着在中间排列 */
            /* justify-content: center; */

            /* 里面的子盒子，靠近两侧的子盒子紧贴两侧，中间的盒子空白空间平均分隔 */
            /* justify-content: space-between; */

            /* 里面的子盒子，靠近两侧的子盒子分别于两侧的距离是中间盒子空白距离的一般*/
            justify-content: space-around;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .flex-item {
            width: 100px;
            height: 200px;
            background-color: purple;
        }
    </style>

<div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

align-items属性

align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式

5. align-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
6. align-items: flex-start;子元素在侧轴顶端对齐
7. align-items: flex-end; 子元素在侧轴末端对齐
8. align-items: center; 子元素在侧轴中间对齐
9. align-items: baseline; 子元素在第一行文字的基线对齐

    <style>
        .flex-container {
            display: flex;
            align-items: center;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .flex-item {
            width: 100px;
            height: 200px;
            background-color: purple;
        }
    </style>

<div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

align-content属性

align-content属性 针对侧轴并且是多列
align-content: flex-start | flex-end | center | space-between | space-around | stretch
与上文侧轴align-items相似 只不过针对的是多列

<style>
        .box {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 400px;
            height: 400px;
            background-color: palegoldenrod;
        }

        .item {
            width: 150px;
            height: 100px;
            background-color: pink;
        }
    </style>

 <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

flex-wrap 属性

flex-wrap 属性 flex-wrap: nowrap|wrap|wrap-reverse; 顾名思义，不换行|换行|换行并且行顺序相反
在这里，不换行，符合弹性盒子特定，当空间不够时，有需要不换行，那么容器里的子盒子大小会变小

属性值如下：

1. row：这是默认值。当设置为row时，主轴的方向为水平，子元素从左到右排列。
2. row-reverse：当设置为row-reverse时，主轴的方向仍然是水平，但子元素从右到左排列，即反向水平排列。
3. column：当设置为column时，主轴的方向变为垂直，子元素从上到下排列。
4. column-reverse：当设置为column-reverse时，主轴的方向为垂直，但子元素从下到上排列，即反向垂直排列。

 <style>
        .box {
            display: flex;
            flex-wrap: nowrap;
            width: 400px;
            height: 400px;
            background-color: palegoldenrod;
        }

        .item {
            width: 150px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>