时间戳

首页 > 技术文章 > CSS3 flex弹性步局

CSS3 flex弹性步局

OrochiZ- 2019-09-25 12:18 原文

1.Flex容器属性

  • 基本用法 设置父容器为
display: flex

PS:如果想要容器以行内元素展示，则将其设定为

display: inline-flex

flex布局可以让块级子元素排列在同一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            margin: 20px auto;
            list-style: none;
            width: 500px;
            height: 200px;
            border: 1px solid red;
            /* 设置为flex容器 */
            display: flex;
        }
        ul>li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color:#fff;
            font-size: 30px;
        }
    </style>
    <body>
        <ul>
            <li style="background-color: red">1</li>
            <li style="background-color: green">2</li>
            <li style="background-color: blue">3</li>
            <li style="background-color: pink">4</li>
        </ul>
    </body>
</html>

效果：

2.设置子元素在（主轴）水平方向的对齐方式 justify-content

它有5个可能的值：
flex-start：默认，左对齐，子元素在左边，空白在右边
flex-end：右对齐，子元素在右边，空白在左边
center：居中对齐，子元素在中间，空白在两边
space-between：第一个和最后一个子元素占据两端，中间区域用空白均分隔开
space-around：子元素均分所有空白

3.设置子元素在交叉轴(垂直方向)的对齐方式 align-items

推荐子元素只有一排时使用
它有5个可能的值：
flex-start：顶对齐，子元素在顶部，空白在底部
flex-end：底对齐，子元素在底部，空白在顶部
center：居中对齐，子元素在中间，空白在两边
baseline: 项目的第一行文字的基线对齐
stretch：默认，拉伸，如果项目未设置高度或设为auto将占满整个容器的高度

如果子元素位设定高度或高度位auto，他将占满整个容器的高度，如果子元素有高度，则默认顶对齐

4.换行和排列方向

flex-wrap属性：如果子元素在一条轴线排列不下，是否换行？如何换行？

flex-direction属性：设置主轴的方向（默认为水平方向）
元素排序的方向就是主轴方向，元素排列不下需要需要换行时的方向就是交叉轴方向
它有4个可能的值：
row：水平方向（默认），从左到右排列
column：垂直方向，从上到下排列
row-reverse：水平反转
column-reverse：垂直反转

flex-wrap和flex-direction 可以简写成flex-flow

例如

flex-flow: row wrap

5.align-content属性：定义多根轴线的对齐方式

推荐有多排子元素时使用(处理换行时的间隔)

注意:align-content与align-items不能同时设置

6.子元素的属性

  • flex-grow属性：定义项目的放大比例

如果同一行的子元素未填满那一整行的话，子元素之间就会有间隔存在，flex-grow可以吸收这些间隔来扩展自己的宽度。
默认值为0,可以是小数，子元素根据这个属性的值按比例划分剩余空间。
语法：flex-grow：number
如果父容器一共有3个子元素，他们flex-grow分别为a,b,c，他们均分空白间隙空间的公式为
剩余空白空间 * a / (a+b+c)
剩余空白空间 * b / (a+b+c)
剩余空白空间 * c / (a+b+c)

  • flex-shrink 定义缩小的比例

语法：flex-shrink:number
如果设置了子元素不换行，当子元素的大小超出flex容器时，子元素就会自动收缩。
这个属性默认值为1，即所有的子元素收缩的比例一致，可以为每个子元素单独设置新的数值
如果所有项目都为0，则当空间不足时，项目撑破容器而溢出
下面的实例中，本来每个子元素都是正方形，即宽高都是100px，5个子元素总宽度就是500px，而flex容器只有400px，少了100px，而每个元素的 flex-shrink都为1，所以每个子元素都缩小 100/5=20px 最后每个元素的宽度为80px

但如果5个子元素的 flex-shrink值分别为 0/1/0/1/0

  • order 属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  • 简写
    flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    通常元素需要占据剩余空间的情况居多，这时候直接设置flex属性值即可，而不用写flex-grow
  • align-self属性
    align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父元素的align-items属性
    可选值与align-items一致
    flex-start：默认，顶对齐，子元素在顶部，空白在底部
    flex-end：底对齐，子元素在底部，空白在顶部
    center：居中对齐，子元素在中间，空白在两边
    baseline: 项目的第一行文字的基线对齐
    stretch：拉伸，如果项目未设置高度或设为auto，将占满整个容器的高度。
li:nth-of-type(1){
    align-self:center;
}

推荐阅读