flex布局

JWbonze

已于 2022-02-18 15:00:55 修改

阅读量334

点赞数

分类专栏： # CSS 文章标签： flex css3

于 2021-10-28 14:51:39 首次发布

本文链接：https://blog.csdn.net/JWbonze/article/details/121014275

版权

Flex布局 flex-direction flex-wrap justify-content align-items

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
开发时使用弹性盒子布局替换传统的盒子+浮动方式。
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效；flex内各元素无法使用text-align，即水平对齐无效。
采用flex布局的元素称为flex容器，它的所有子元素称为item。
div启用flex布局

display: flex;

示例：

    <div style="display: flex;">
        <div>上</div>
        <div>下</div>
    </div>

效果：
在这里插入图片描述

1.容器属性

flex-direction

使用flex-direction可以修改容器内子元素（item）排列方向。
flex容器内item排列方向：设置主轴，默认水平方向是主轴，即容器内的子元素（item）自左向右水平排列。此时，纵向是侧轴。
属性名：flex-direction
属性值：row、row-reverse、column、column-reverse
（1）在容器内item从左往右水平排列，flex中默认item水平从左向右布局：

flex-direction:row

（2）在容器内item从右往左水平排列：

flex-direction: row-reverse;

（3）在容器内item从上往下纵向排列，此时垂直方向为主轴：

flex-direction:column

示例：

    <div style="display: flex;flex-direction: column;">
        <div>上</div>
        <div>下</div>
    </div>

效果：
在这里插入图片描述
（4）在容器内item从下往上纵向排列：

flex-direction: column-reverse

flex-wrap

设置item填满容器后如何换行。
属性名：flex-wrap
属性值：
（1）nowrap：不换行，默认值
（2）wrap：换行，从上往下
（3）wrap-reverse：换行，从下往上。
示例：

    <div style="width: 100px;display: flex;">
        <div>没有flex-wrap</div>
        <div>床前明月光，</div>
        <div>疑是地上霜。</div>
    </div>
    <div style="width: 100px;display: flex;flex-wrap: wrap;">
        <div>有flex-wrap</div>
        <div>床前明月光，</div>
        <div>疑是地上霜。</div>
    </div>

效果：
在这里插入图片描述
注意：如果不设置wrap，flex的布局宽度或高度无效，会在一行或一列内自动调整宽度或高度。
上面示例的“没有flex-wrap”所在的div就是从左到右排列。

justify-content

设置元素在主轴对齐方式。
如果主轴为水平方向，则容器设置了宽度；如果主轴为垂直方向，则容器设置了高度。
属性名：justify-content
属性值：
（1）flex-start：如果主轴为水平方向，则左对齐；主轴为垂直方向，则上对齐。默认值。
（2）flex-end：如果主轴为垂直方向，则右对齐；主轴为垂直方向，则下对齐。
（3）center：居中
（4）space-between：两端对齐，项目之间的间隔都相等。
（5）space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
示例，容器设置了宽度：

    <div style="width: 400px;border:solid 1px red;display: flex;">
        <div>默认：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 400px;border:solid 1px red;display: flex;justify-content: center;">
        <div>center：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 400px;border:solid 1px red;display: flex;justify-content: space-between;">
        <div>space-between：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 400px;border:solid 1px red;display: flex;justify-content: space-around;">
        <div>space-around</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>

效果：
在这里插入图片描述
主轴为垂直方向的示例，容器设置了高度：

    <div style="width: 200px;height:200px;border:solid 1px red;display: flex;flex-direction: column;">
        <div>默认：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 200px;height:200px;border:solid 1px red;display: flex;flex-direction: column;justify-content: center;">
        <div>center：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 200px;height:200px;border:solid 1px red;display: flex;flex-direction: column;justify-content: space-between;">
        <div>space-between：</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>
    <div style="width: 200px;height:200px;border:solid 1px red;display: flex;flex-direction: column;justify-content: space-around;">
        <div>space-around</div>
        <div>床前，</div>
        <div>疑是。</div>
        <div>举头，</div>
        <div>低头。</div>
    </div>

效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/4d1041d7685446eb8b2af45fa0eccd97.png

align-items

设置子元素（item）在侧轴方向的元素对齐方式，justify-content设置了在主轴方向的对齐，而align-items则设置了侧轴方向。
属性名：align-items
属性值：
（1）stretch（中文“舒展”）：铺满竖直方向，默认值。注意：设置该属性时，不能设置height，否则按照height来显示
（2）flex-start：靠上边沿对齐
（3）center：居中
（4）flex-end：靠下边沿对齐
（5）baseline：以项目第一行文字的基线对齐
示例：

    <div style="width: 300px;border:solid 1px red;display: flex;">
        <div style="border: solid 1px blue;width: 100px;">默认</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>
    
    <div style="width: 300px;border:solid 1px red;display: flex;align-items: stretch;">
        <div style="border: solid 1px blue;width: 100px">stretch</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>

    <div style="width: 300px;border:solid 1px red;display: flex;align-items: flex-start;">
        <div style="border: solid 1px blue;width: 100px;">flex-start</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>

    <div style="width: 300px;border:solid 1px red;display: flex;align-items: center;">
        <div style="border: solid 1px blue;width: 100px">center</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>

    <div style="width: 300px;border:solid 1px red;display: flex;align-items: flex-end;">
        <div style="border: solid 1px blue;width: 100px">flex-end</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>

    <div style="width: 300px;border:solid 1px red;display: flex;align-items: baseline;">
        <div style="border: solid 1px blue;width: 100px">baseline</div>
        <div style="height: 80px;border: solid 1px green;">床前，</div>
        <div style="height: 50px;border: solid 1px orange;">疑是。</div>
        <div style="height: 100px;border: solid 1px gray;">举头，</div>
        <div style="border: solid 1px purple">低头。</div>
    </div>