CSS弹性布局（flex）快速入门和实操

CSS弹性布局基础知识：

Flex容器属性：

1、 flex-direction:row/colum:主轴方向，默认主轴为行，
2、 flex-wrap:nowrap/wrap;默认不换行
3、 flex-flow:简写direction和wrap;
4、 justify-content:flex-start/center/flex-end和space-between/space-evenly/space-around;
主轴上项目对其方式和排列方式
5、 align-items:flex-start/center/flex-end；项目在交叉轴上的对其方式
6、 align-content: space-between/space-evenly/space-around: 项目在交叉轴上多行时的排列方式

Flex项目属性：

1、 order:为项目编号（int）,值越小越靠前排列
2、 flex-grow/shrink/basis: grow/shrink的值为比例分配：0~1； basis:项目占据的主轴空间。简写：flex:0,0 auto;
3、 aglin-self:某个特定项目的对齐方式；值为：flex-start、center、flex-end;

实战练习：

1、flex个属性练习：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局小案例</title>
    <style>
        .box{
            /* width: 40em; */
            /* height: 15em; */
            background-color: lightgray;
            display: flex;
            /* 存在剩空间可以通过space-between|space-evenly|space-around 来分配剩余空间*/
            /* justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly; */
            flex-flow:row nowrap;
            align-items:flex-end;
            /* 存在多行时，副轴存在剩余空间时，通过space-between|space-evenly|space-around 来分配剩余空间 */
            align-content: space-around;
        }
        .box .item{
            width:200px;
            height:30px;
            flex-grow: 1;
            flex-shrink:0;
        /* 设置元素自动伸缩简写：grow shrink basis */
            flex:1;/*等同于1,1,auto*/
            flex:none;/*等同于0 0 auto*/
            flex:initial;/*等同于 0 1 auto*/
        }
        .box .item:nth-of-type(2n+1){
            background-color: lightseagreen;
        }
        .box .item:nth-of-type(2n){
            background-color: lightskyblue;
        }
        .box .item:nth-child(1){
            order:4;
        }
        .box .item:nth-child(3){
            order:5;
            /* 设置第三个为基本宽度为 300px */
            flex-basis:300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
    </div>
</body>
</html>

2、效果图：

CSS弹性布局基础知识：

Flex容器属性：

Flex项目属性：

实战练习：

相关文章