likes
comments
collection
share

4. flex布局

作者站长头像
站长
· 阅读数 78

1、什么是flex布局

Flex是Flexible Box的缩写,意为"弹性布局"。用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

例子：（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            background-color: #ffc0cb;
            width: 60%;
            /* height: 50px; */
            margin: 0 auto;
            overflow: hidden;
            list-style: none;
            color: #fff;
            line-height: 50px;
        }
        .nav li{
            float: left;
            width: 100px;
            margin-left: -10px;
            text-align: center;
        }
        .nav li:hover{
            cursor: pointer;
            background-color: #ff1493;
            color: #dcdbdc;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>手机</li>
        <li>电脑</li>
        <li>平板</li>
    </ul>
</body>
</html>

4. flex布局

（2）

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: #fff;
        }
        .wrapper>div{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #000;
        }
    </style>

    <div class="wrapper">
        <div></div>
        <div></div>
        <div></div>
    </div>

4. flex布局

2、父元素属性

（1）flex-direction

指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

row：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

row-reverse：表现和 row 相同，但是置换了主轴起点和主轴终点

column：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse：表现和column相同，但是置换了主轴起点和主轴终点

注：值 row 和 row-reverse 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

（2）flex-wrap

指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值

  • nowrap

flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。

  • wrap

flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值等价于 start 或before。cross-end 为确定的 cross-start 的另一端。

  • wrap-reverse

和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

（3）justify-content

定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

justify-content: center; /* 居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */

（4）align-items

对齐项将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;

（5）align-content

设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。 [对齐内容 - CSS：层叠样式表 |多核 (mozilla.org)]]

/*align-content 不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置 flex 元素 */
align-content: flex-end; /* 从终止点开始放置 flex 元素 */

3、子元素属性

（1）order

规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 属性的值的增序进行布局。拥有相同 属性值的元素按照它们在源代码中出现的顺序进行布局。

（2）flex-grow

属性 flex-grow CSS 设置 flex 项 主尺寸 的 flex 增长系数

（3）flow-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

（4）flex

flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

4、container的属性（父元素属性）

（1）flex-direction

作用： 决定主轴的方向（即项目的排列方向）

.box{
  flex-direction:row | row-reverse | column | column-reverse
}
flex-direction: row; 横排列

4. flex布局

flex-direction: column; 纵排列

4. flex布局

flex-direction: column-reverse; 纵向翻转

4. flex布局

flex-direction: row-reverse; 横向翻转

4. flex布局

（2）flex-wrap

默认情况下,项目都排在一条线(轴线)上。flex-wrap 属性定义,如果一条轴线排不下，如何换行。

.box{
 	flex-wrap:nowrap | wrap | wrap-reverse
	//默认参数为nowrap是不换行的
}

（1）nowrap（默认）：不换行。

4. flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            display: flex;
            /*  row \column\column-reverse\row-reverse*/
            flex-direction: row;
            /* flex-wrap: wrap; */
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
        }
        .wrapper>div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

4. flex布局

（2）wrap：换行，第一行在上方。

4. flex布局

.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}

4. flex布局

（3）wrap-reverse：换行，第一行在下方。

4. flex布局

.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap-reverse;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}

4. flex布局

flex-flow是flex-direction和flex-wrap的结合

flex-flow: row wrap;

4. flex布局

（3）justify-content

作用：定义项目在主轴上的对齐方式。

什么是主轴：主轴就是flex-direction指定的轴。

row：主轴为x

column：主轴为y

.box{
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. flex布局

center: 居中
space-between: 两端对齐,项目之间的间隔都相等。
space-around: 每个项目两侧的间隔相等。
center：
.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap-reverse;
    flex-flow: row wrap;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
    justify-content: center;
}

4. flex布局

space-between:
justify-content: space-between;

4. flex布局

space-around:
justify-content: space-around;

4. flex布局

（4）align-items的属性

什么是侧轴：侧轴就是主轴另外一个轴，row侧轴为y，column侧轴为x。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items: center;

4. flex布局

align-items: flex-start;

4. flex布局

align-items: flex-end;

4. flex布局

5、item属性（子元素属性）

1.	order
2.	flex-grow
3.	flex-shrink
4. 	flex
5.	align-self

1、 order属性

控制子元素在container的排列情况

默认值为0,数值越大,越靠后,越小越靠前

4. flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
        }
        .wrapper>div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

4. flex布局

.second{
    order: 3;
}

4. flex布局

例子2：

.one{
    order: 4;
}
.second{
    order: 3;
}
.third{
    order: 1;
}
.four{
    order: 0;
}
.five{
    order: 0;
}
.six{
    order: 1;
}

<div class="wrapper">
  <div class="one">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
</div>

4. flex布局

2、 flex-grow 属性

控制自己如何长胖

4. flex布局

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

.second{
    order: 0;
    flex-grow: 2;
}

4. flex布局

3、 flex-shrink

控制自己如何变瘦

.wrapper{
    display: flex;
    width: 120px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #333;
}
.wrapper>div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
}
.second{
    /* order: 0; */
    flex-shrink: 2;
}

4. flex布局

4、 flex-basic

定义item(项目)占据主轴空间的大小。默认参数auto;

flex-basic:auto|100px~
# tips:可以设置像素

4. flex布局

5、 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

Tips: 建议优先使用这个属性。

4. flex布局

元素自动占满剩余的空间。

.wrapper{
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}
.wrapper>div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
}
.wrapper>div:first-child{
    width: 30px;
}
.second{
    width: 30px;
}
.wrapper>div:last-child{
    flex: 1;
}

4. flex布局

重点：记住下面这些

display: flex
flex-direction: row / column
flex-wrap: wrap
justify-content: center /space-between
align-items: center
工作中基本只用这些
转载自:https://juejin.cn/post/7273297540861657127
评论
请登录