flex 弹性盒

display: flex

弹性布局一般用于移动端项目上，弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

注意：

  • 弹性盒设置通过display:flex（块级弹性盒）或display:inline-flex（行内块级弹性盒）将其定义为弹性盒
  • 弹性盒里面定义的弹性子元素是脱离文档流的，而弹性盒本身是遵循文档流的
  • 设为flex布局以后，子元素的float、clear和 vertical-align属性将失效

概念：

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

如下图：

一般默认情况下，弹性盒的子元素只在一行内显示，子元素的总宽度即使超出父容器的宽度就会以弹性挤压方式进行排成一行，自左往右排列

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Flex</title>
 7   <style>
 8     *{
 9       margin: 0;
10       padding: 0;
11     }
12     .parent{
13       display: flex;
14       width: 400px;
15       border:3px solid #ccc;
16       height: 200px;
17       margin: 100px auto;
18     }
19     .children{
20       width: 100px;
21       /* 如果子元素没有设置高度，高度默认拉伸至弹性父容器的高度 */
22       height: 100px;
23       border:1px solid orange;
24       background: tomato;
25       line-height: 100px;
26       text-align: center;
27       color: #fff;
28     }
29   </style>
30 </head>
31 <body>
32   <div class="parent">
33     <div class="children">1</div>
34     <div class="children">2</div>
35     <div class="children">3</div>
36     <div class="children">4</div>
37     <div class="children">5</div>
38     <div class="children">6</div>
39     <div class="children">7</div>
40     <div class="children">8</div>
41     <div class="children">9</div>
42     <div class="children">10</div>
43   </div>
44 </body>
45 </html>

 

 弹性盒的属性分为两部分

  • 添加给父容器的常用属性

　　1.flex-direction：定义主轴的方向

 row  自左向右的方向（默认值）
 row-reverse  翻转主轴的水平方向的位置：自右向左
 column  自上而下的方向（比较常用）
 column-reverse  翻转垂直方向的位置：自下而上的方向

 

 

 

 

 

以上4种属性效果图分别如下：

　　2.flex-wrap:定义子元素是否换行（换行条件：子元素的个数宽度大于父容器的宽度）

 nowrap  不换行（默认值）
 wrap  换行（常用）
 wrap-reverse  翻转wrap显示

 

 

 

 

 以上3种属性效果图分别如下：

复合式写法：

　　flex-flow: row nowrap; 是 flex-direciton属性和flex-wrap 属性的简写形式，默认值为 row  nowrap;

　　4.justify-content:定义了项目在主轴上的对齐方式

 flex-start  沿着主轴的起始点对齐（默认值）
 flex-end  沿着主轴的终点对齐
 center  沿着主轴的居中位置对齐
 space-between  两端对齐，中间自由分配
 space-around  在元素左右自动分配距离
 space-evenly  设置元素之间的空隙相等

 

 

 

 

 

 

 

 以上6种属性效果图分别如下：

 

 　　5.align-items:属性定义侧轴方向是如何对齐的

 flex-start  沿着侧轴的起始点对齐
 flex-end  沿着侧轴的终点对齐
 center  沿着侧轴的中间位置对齐
 baseline  沿着侧轴的基线对齐（文字基线和侧轴的对齐）
 stretch  拉伸至同父容器一样高（默认值）

 

 

 

 

 

 

以上5种属性效果图分别如下：

 　　6.align-content: 该属性定义了多跟轴线的对齐方式（对于单行子元素，该属性不起作用）

 flex-start  起始对齐没有行间距
 flex-end  底对齐没有行间距
 center  居中对齐没有行间距
 space-between  两端对齐，中间自动分配
 space-around  自动分配距离
 stretch  项目被拉伸以适应容器（该属性下子元素没有设置高度）

 

 

 

 

 

 

 

 

以上6种属性效果图分别如下：

  • 添加给子元素的常用属性

　　1.align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。

 auto  继承父容器的align-items属性（默认值）
 stretch  元素被拉伸以适应容器
 center  元素位于父容器的中心
 flex-start  元素位于容器的开头
 flex-end  元素位于容器的结尾

 

 

 

 

 

 

效果图如下：

 

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

 

 

 

　　3.flex-grow:扩展 ，定义项目的放大比例，默认值为0，会改变元素原有大小。注意：沿着主轴进行变化

　　4.flex-shrink:收缩比例，规定项目将相对于其他灵活的项目进行收缩的量

  　　　　1  收缩（默认值） 
 　　　　　0  不收缩

 

　　

 

 

　　5.flex-basis:项目的长度。注意（如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效）

 　  6.flex:复合写法 该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

　　

 

posted @ 2020-12-20 19:38  mirabel  阅读(255)  评论(0)    收藏  举报