首页 > 其他分享> 文章详细

弹性盒子（display:flex）

2022-03-06 19:32:50 阅读：192 来源： 互联网

标签：box flex 盒子 align 元素 height width display

1.影响

让子元素默认横向排列（默认主轴：水平方向；相反侧轴：垂直方向）
弹性盒子会把行内元素，变成块元素
只有一个元素时，使用margin:auto 自动居中

2.修改主轴方向

属性：flex-direction

属性值：

row (默认:水平排列)
row-reverse 水平取反排列
column (垂直排列)
column-reverse (垂直相反排列)

HTML Code:

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

CSS Code:

.box {
       width: 500px;
       height: 500px;
       margin: 100px auto;
       border: 1px solid black;
       /* 显示弹性盒子 */
       display: flex;
       /* 修改主轴方向 */
       /*属性：
         column/row(水平排列)/row-reverse(水平反方向)/column-reverse(垂直反方向)*/
          /*修改主轴方向*/
       flex-direction: column;
        }

图示：

3.主轴侧轴对齐方式

1.调整主轴对齐方向justify-content

属性名：justify-content

取值:

flex-start(默认)
flex-end(靠右)
center(中间)
space-between(两端对齐)
space-around(距离环绕:每个元素周围分配相同的空间)
space-evenly(元素之间间隔相等)

HTML:

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

CSS:

.box {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid black;
            /* 显示弹性盒子 */
            display: flex;
            /*justify-content:调整主轴对齐方向 */
            justify-content: space-around;
        }
        .box div {
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            /* margin: auto; */
        }

图示:

2.space-around与space-evenly的区别

space-around 均匀排列每个元素，每个元素周围分配相同的空间。
space-evenly 均匀排列每个元素，每个元素之间的间隔相等。

3.调整侧轴对齐方向align-items

属性名：align-items

取值:

flex-start(默认)
flex-end(靠右)
center(中间)

4.折行与行间距flex-wrap

1.折行

语法：flex-wrap: wrap;

2.调整折行之后的行间距

语法：align-content: flex-start;

取值：

flex-start（默认值）
flex-end
center
space-around
space-between

HTML:

<div class="big-box">
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
        <div><img src="img/jd.png"alt=""></div>
    </div>

CSS:

.big-box {
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
             }
.big-box div {
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            box-sizing: border-box;
            /* 将里面的div设置为弹性盒子，使里面的元素变为块元素 */
            display: flex;
        }

        /* 对图片设置大小，自动垂直居中 */
        .big-box div img {
            height: 50px;
            width: 50px;
            margin: auto;
        }

图示效果:

5.子元素对齐align-self

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

语法:align-self

align-self: stretch|center|flex-start|flex-end|baseline

取值：

flex-start

元素位于容器的开头。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end

元素位于容器的结尾。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center

元素位于容器的中心。

弹性盒子元素在该行的侧轴（纵轴）上居中放置。

baseline

元素位于容器的基线上。

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch

如果没有给该元素宽高，元素会被拉伸以适应容器。

图示:

HTML:

<div class="big-box">
        <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div>
        <div class="b4">4</div>
        <div class="b5">5</div>
    </div>

CSS:

.big-box {
            height: 240px;
            width: 300px;
            border: 1px solid black;
            display: flex;
        }

        .big-box div {
            width: 60px;
            /* height: 60px; */
            border: 1px dashed red;
        }

        .b1 {
            height: 60px;
            align-self: flex-start;
        }

        .b2 {
            height: 60px;
            align-self: flex-end;
        }

        .b3 {
            height: 60px;
            align-self: center;
        }

        .b4 {
            height: 60px;
            align-self: baseline;
        }

        .b5 {
            align-self: stretch;
        }

6.调整子元素顺序order

order属性：

设置或检索弹性盒模型对象的子元素出现的顺序。

默认值为0
可取负值

HTML：

<div class="big-box">
        <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div>
        <div class="b4">4</div>
        <div class="b5">5</div>
    </div>

CSS:

.big-box {
            height: 240px;
            width: 300px;
            border: 1px solid black;
            display: flex;
        }
        .big-box div {
            width: 60px;
            height: 60px;
            border: 1px dashed red;
        }
        .b1 {
            order: 0;
            /* 默认值 */
        }
        .b3 {
            order: 1;
        }
		.b5 {
            order: -1;
        }

7.flex属性：分配子元素的剩余空间

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

HTML:

<div class="big-box">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b3">3</div>
</div>

CSS:

.big-box {
    height: 400px;
    width: 400px;
    border: 1px solid bl
    display: flex;
    flex-direction: colum
}
.big-box div {
    width: 100px;
    height: 100px;
    border: 1px dashed red;
}
.b1,
.b3 {
    flex: 1;
}
.b2 {
    flex: 2;
}

图示：

标签：box,flex,盒子,align,元素,height,width,display
来源： https://www.cnblogs.com/Eamon-18/p/15973102.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

弹性盒子（display:flex）

1.影响

2.修改主轴方向

属性：flex-direction

属性值：

3.主轴侧轴对齐方式

1.调整主轴对齐方向justify-content

2.space-around与space-evenly的区别

3.调整侧轴对齐方向align-items

4.折行与行间距flex-wrap

1.折行

2.调整折行之后的行间距

5.子元素对齐align-self

语法:align-self

取值：

图示:

6.调整子元素顺序order

order属性：

7.flex属性：分配子元素的剩余空间