flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思
没有flex属性的时候，我们想并列多个块元素的时候，一般常用的就是三种方法
1、采用float浮动属性
2、使用position定位属性
3、通过display转化元素为块元素或行内元素

文章目录

前言
一、Flex是什么？
二、容器和项目拥有的属性

前言

flex布局是为了让布局更简单，更容易实现垂直举行，两端对齐的效果，也可以适配不同大小的屏幕，自由弹性伸缩，当父元素添加flex布局后，他的子元素便可以自动的横向排列。
采用flex布局的元素被称作容器。在flex布局中的子元素被称作项目

一、Flex是什么？

在这里插入图片描述

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
主轴的开始位置（与边框的交叉点）叫做main start
结束位置叫做main end
交叉轴的开始位置叫做cross start
结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
主轴简称为X轴，交叉轴简称为Y轴

二、容器和项目拥有的属性

1.容器的属性

当元素设置diaplay:flex后，便可以指定其为flex布局
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；

1. flex-direction   切换主轴方向
2. flex-wrap        主轴是否换行
3. flex-flow        flex-direction和flex-wrap属性的复合属性
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

（1）flex-direction

1、row（默认值）：主轴为水平方向，起点在左端。
2、row-reverse：主轴为水平方向，起点在右端。
3、column：主轴为垂直方向，起点在上沿。
4、column-reverse：主轴为垂直方向，起点在下沿。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
      
      
            background-color: #ccc;
            width:900px;
            height: 300px;
            display: flex;
        }
        #box{
      
      
            flex-direction: row;
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse */
        }
        .box1{
      
      
            padding: 30px;
        }
    </style>
</head>
<body>
    <div id="box">                 
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:wheat ;">3</div>
    </div>
</body>
</html>

（2）flex-wrap

1、nowrap (默认值) 不换行压缩宽度
2、wrap    换行(换行产生的间隔可以使用align-content解决)
3、wrap-reverse 反向换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
      
      
            background-color: #ccc;
            width:400px;
            height: 400px;
            display: flex;
        }
        .box1{
      
      
            height:100px;
            width: 100px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box" style="flex-wrap: nowrap ;">                 
    <!-- <div id="box" style="flex-wrap: wrap ;">                  -->
    <!-- <div id="box" style="flex-wrap: wrap-reverse;">                  -->
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:burlywood;">4</div>
        <div class="box1" style="background-color:violet ;">5</div>
        <div class="box1" style="background-color:tomato;">6</div>
    </div>
</body>
</html>

（3）flex-flow

flex-low:flex-direction flex-wrap
flex-low:row/row-reverse/column/column-reverse nowrap/wrap/wrap-reverses
//顺序可以倒过来
//就是 flex-direction 和 flex-wrap 的组合，简写，同上，这里不详细介绍

（4）justify-content

1、flex-start 左对齐
2、flex-end   右对齐
3、center     居中对齐
4、space-between 两端对齐
5、space-around  均分
6、space-evenly  等分

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 500px;
            height: 700px;
            display: flex;
        }
        #box {
      
      
            justify-content: flex-start;
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
    </div>
</body>

</html>

（5）align-items

添加在容器(父元素)上的属性，设置的是项目(子元素)在交叉轴(Y轴)上对齐样式
当项目(子元素)设置了align-self，就会覆盖掉容器(父元素)的align-items

1、flex-start：交叉轴的起点对齐。
2、flex-end：交叉轴的终点对齐。
3、center：交叉轴的中点对齐。
4、baseline: 项目的第一行文字的基线对齐。
5、stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 300px;
            display: flex;
        }
        #box {
      
      
            /* align-items:flex-start; */
            /* align-items:flex-end; */
            /* align-items:center; */
            /* align-items:baseline; */
            /* align-items:stretch; */
        }
        .box1 {
      
      
            height: 100px;  /*align-items:baseline 不设置高度*/
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
    </div>
</body>

</html>

（6）align-content

justify-conent，align-items，align-content 都极度相似.

1、flex-start 与交叉轴的起点对齐(左对齐)
2、flex-end   与交叉轴的终点对齐(右对齐 )
3、center     居中对齐
4、space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
5、space-around  每根轴线两侧的间隔都相等，平均分配
6、stretch(默认值)      多行占满整个交叉轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 400px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        #box {
      
      
            align-content:flex-start;
            /* align-content:flex-end; */
            /* align-content:center; */
            /* align-content:space-between; */
            /* align-content:space-around; */
            /* align-content: stretch; */
        }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
        <div class="box1" style="background-color:violet ;">5</div>
        <div class="box1" style="background-color:slateblue ;">6</div>
        <div class="box1" style="background-color:sienna ;">7</div>
    </div>
</body>

</html>

2.项目的属性

1、align-self: 覆盖container align-items 属性
2、flex-grow：分配剩余空间(前提是有剩余空间可分配)
3、flex-shrinik: 压缩
4、flex-basis: 有效宽度
5、flex缩写
6、order 排序

（1）align-self

可覆盖容器的align-items, 用来定义某个项目的对齐方式

1、flex-start：交叉轴的起点对齐。
2、flex-end：交叉轴的终点对齐。
3、center：交叉轴的中点对齐。
4、baseline: 项目的第一行文字的基线对齐。
5、stretch 在交叉轴方向上拉伸
6、auto (默认值)继承 align-items 属性值
同上容器的align-items属性效果一致，这里不详细介绍

（2）flex-grow

默认值为0不放大,保持初始值
initial 设置默认值,与设置0的效果是一样的
inherit 从父元素继承该属性。
n    正数，代表分配剩余空间的几份

在这里插入图片描述

（3）flex-shrink

默认值为1
initial 设置初始默认值,与 设置为1效果一样
0  禁止收缩,保持原始尺寸
n  压缩系数

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 300px;
            display: flex;
        }
        #box div:nth-of-type(1){
      
      flex-shrink: 1; }
        #box div:nth-of-type(2){
      
      flex-shrink: 2; }
        #box div:nth-of-type(3){
      
       flex-shrink: 0; }
        #box div:nth-of-type(4){
      
       flex-shrink: 1;}
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
    </div>
</body>

</html>

（4）flex-basis

默认值为auto，即项目的本来大小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
它相当于width属性，设置固定宽度

（5）flex(缩写)

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：flex:auto = flex:1 1 auto 和 flex:none= flex:0 0 auto。

（6）order

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 200px;
            display: flex;
        }
        #box div:nth-of-type(1){
      
      order:1 }
        #box div:nth-of-type(2){
      
      order:0 }
        #box div:nth-of-type(3){
      
      order:3 }
        #box div:nth-of-type(4){
      
      order:2 }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
    </div>
    <div id="box">
        <p class="box1" style="background-color:skyblue;">1</p>
        <p class="box1" style="background-color:greenyellow;">2</p>
        <p class="box1" style="background-color:darkgreen ;">3</p>
        <p class="box1" style="background-color:tomato ;">4</p>
    </div>
</body>

</html>

弹性布局flex属性详解

文章目录

前言

一、Flex是什么？

二、容器和项目拥有的属性

1.容器的属性

（1）flex-direction

（2）flex-wrap

（3）flex-flow

（4）justify-content

（5）align-items

（6）align-content

2.项目的属性

（1）align-self

（2）flex-grow

（3）flex-shrink

（4）flex-basis

（5）flex(缩写)

（6）order

猜你喜欢