flex 布局

时间 2019-11-18

标签 flex 布局栏目 Flex 繁體版

原文原文链接

1、什么是 flex 布局？css

　　flex 布局意为"弹性布局"，用来为盒状模型提供最大的灵活性。html

　　主要思想：给容器控制项目的宽度高度的能力，使用 flex 项目能够自动填满容器的可用空间。Flex 容器（父元素）使用 Flex 项目（子元素）能够自动放大与收缩，用来填补可用的空闲空间。ide

上图展现的是水平方向的 flex 容器，若 flex-direction 属性为竖直方向，则 main axis 的方向为竖直方向。布局

main axis: Flex容器的主轴主要用来配置Flex项目。注意，它不必定是水平，这主要取决于flex-direction属性。
main-start | main-end: Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
main size: Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪个对着主轴方向决定。
cross axis: 与主轴垂直的轴称做侧轴，是侧轴方向的延伸。
cross-start | cross-end: 伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
cross size: Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪个对着侧轴方向决定。

2、容器的属性flex

　　Flex容器不是块容器，所以有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中全部column-*属性、float、clear属性和vertical-align属性在Flex容器上没有做用。spa

　　一、display：定义一个 flex 容器，决定其为内联仍是块设计

　　　　取值：flex（块） | inline-flex（内联）code

　　　　若是元素 display 的值指定为 inline-flex，并且元素是一个浮动元素或绝对定位元素，则 display 的计算值是 flex。htm

　　二、flex-direction：建立方向轴，定义 flex 项目在 flex 容器中放置的方向。blog

　　　　取值：row（默认值）：主轴为水平方向，起点在左端

　　　　　　 row-reverse：主轴为水平方向，起点在右端

　　　　　　　column：主轴为垂直方向，起点在上沿

　　　　　　　column-reverse：主轴为垂直方向，起点在下沿

　　三、flex-wrap：让 flex 项目多行显示

　　　　　取值：nowrap（默认值）：单行显示

　　　　　　　　wrap：多行显示，第一行在上方

　　　　　　　　wrap-reverse：多行显示，第一行在下方　　

　　四、flex-flow：属性 flex-direction 和 flex-wrap 属性的简写

　　五、justify-content：定义项目在主轴上的对齐方式

　　　　取值：flex-start（默认值）：左对齐

　　　　　　　flex-end：右对齐

　　　　　　　center：居中

　　　　　　　space-between：两端对齐，项目之间的间隔都相等

　　　　　　　space-around：每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍。

　　六、align-items：定义项目在交叉轴上的对齐方式

　　　　取值：flex-start：交叉轴的起点对齐

　　　　　　　flex-end：交叉轴的终点对齐

　　　　　　　center：交叉轴的中点对齐

　　　　　　　baseline：项目的第一行文字的基线对齐

　　　　　　　stretch（默认值）：若是项目未设置高度或设为 auto，将占满整个容器的高度。

　　七、align-content：定义多跟轴线的对齐方式。若只有一根轴线，则该属性不起做用。

　　　　取值：flex-start：与交叉轴的起点对齐

　　　　　　　flex-end：与交叉轴的终点对齐

　　　　　　　center：与交叉轴的中点对齐

　　　　　　　space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

　　　　　　　space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍　　　　

　　　　　　　stretch（默认值）：轴线占满整个交叉轴

3、项目的属性

　　一、order：定义项目的排列顺序，数值越小排列越靠前，默认为0

　　二、flex-grow：定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大

　　三、flex-shrink：定义项目的缩小比例，默认为1，即若是空间不足，该项目缩小

　　四、flex-basis：定义 flex 项目在分配多余空间以前的一个默认尺寸。默认值是 auto，即项目原本的大小。

　　五、flex：是 flex-grow，flex-shrink 和 flex-basis三个属性的缩写。第二个和第三个参数( flex-shrink 和 flex-basis )是可选值。其默认值是 0 1 auto。

　　六、align-self：容许单个项目与其余项目有不同的对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

4、实例　　

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Flex 布局</title>
  7     <style>
  8         /* basic style sheet */
  9         * {
 10             box-sizing: border-box;
 11         }
 12         html, body {
 13             height: 100%;
 14         }
 15         body {
 16             display: flex;
 17             align-items: center;
 18             justify-content: center;
 19             vertical-align: center;
 20             flex-wrap: wrap;
 21             align-content: center;
 22             font-family: 'Open Sans', sans-serif;
 23             background: linear-gradient(top, #222, #333);
 24         }
 25         [class^=box] {
 26             margin: 16px;
 27             padding: 4px;
 28             background-color: #e7e7e7;
 29             width: 104px;
 30             height: 104px;
 31             object-fit: contain;
 32             box-shadow: inset 0 5px white,
 33             inset 0 -5px #bbb,
 34             inset 5px 0 #d7d7d7,
 35             inset -5px 0 #d7d7d7;
 36             border-radius: 10%;
 37         }
 38         .item {
 39             display: block;
 40             width: 24px;
 41             height: 24px;
 42             border-radius: 50%;
 43             margin: 4px;
 44             background-color: #333;
 45             box-shadow: inset 0 3px #111, inset 0 -3px #555;
 46         }
 47         [class^=box] {
 48             display: flex;
 49         }
 50         .box-1 {
 51             justify-content: center;    /* 项目在主轴上的对齐方式，此例中为水平方向对齐方式 */
 52             align-items: center;        /* 项目在交叉轴上的对齐方式，此例中为竖直方向对齐方式 */
 53         }
 54         .box-2 {
 55             justify-content: space-between;
 56         }
 57         /* :nth-of-type(N) 选择器匹配属于父元素的特定类型的第 N 个子元素的每一个元素 */
 58         .box-2 .item:nth-of-type(2) {
 59             align-self: flex-end;        /* 定义单个项目与其余项目具备不同的对齐方式 */
 60         }
 61         .box-3 {
 62         }
 63         .box-3 .item:nth-of-type(2) {
 64             justify-content: center;
 65             align-self: center;
 66         }
 67         .box-3 .item:nth-of-type(3) {
 68             align-self: flex-end;
 69         }
 70         .box-4, .box-6 {
 71             justify-content: space-between;
 72         }
 73         .column {
 74             display: flex;
 75             flex-direction: column;        /* 建立方向轴，column表示主轴为垂直方向，起点在上沿 */
 76             justify-content: space-between;        /* 项目在主轴上的对齐方式，space-between 表示两端对齐 */
 77         }
 78         .box-5 {
 79             justify-content: space-between;
 80         }
 81         .box-5 .column:nth-of-type(2), .box-7 .column:nth-of-type(2) {
 82             justify-content: center;
 83         }
 84         .box-8 .column:nth-of-type(2) {
 85             justify-content: space-around;
 86         }
 87     </style>
 88 </head>
 89 
 90 <body>
 91     <div class="box-1">
 92         <span class="item"></span>
 93     </div>
 94 
 95     <div class="box-2">
 96         <span class="item"></span>
 97         <span class="item"></span>
 98     </div>
 99 
100     <div class="box-3">
101         <span class="item"></span>
102         <span class="item"></span>
103         <span class="item"></span>
104     </div>
105 
106     <div class="box-4">
107         <div class="column">
108             <span class="item"></span>
109             <span class="item"></span>
110         </div>
111         <div class="column">
112             <span class="item"></span>
113             <span class="item"></span>
114         </div>
115     </div>
116 
117     <div class="box-5">
118         <div class="column">
119             <span class="item"></span>
120             <span class="item"></span>
121         </div>
122         <div class="column">
123             <span class="item"></span>
124         </div>
125         <div class="column">
126             <span class="item"></span>
127             <span class="item"></span>
128         </div>
129     </div>
130 
131     <div class="box-6">
132         <div class="column">
133             <span class="item"></span>
134             <span class="item"></span>
135             <span class="item"></span>
136         </div>
137         <div class="column">
138             <span class="item"></span>
139             <span class="item"></span>
140             <span class="item"></span>
141         </div>
142     </div>
143 
144     <div class="box-7">
145         <div class="column">
146             <span class="item"></span>
147             <span class="item"></span>
148             <span class="item"></span>
149         </div>
150         <div class="column">
151             <span class="item"></span>
152         </div>
153         <div class="column">
154             <span class="item"></span>
155             <span class="item"></span>
156             <span class="item"></span>
157         </div>
158     </div>
159 
160     <div class="box-8">
161         <div class="column">
162             <span class="item"></span>
163             <span class="item"></span>
164             <span class="item"></span>
165         </div>
166         <div class="column">
167             <span class="item"></span>
168             <span class="item"></span>
169         </div>
170         <div class="column">
171             <span class="item"></span>
172             <span class="item"></span>
173             <span class="item"></span>
174         </div>
175     </div>
176 
177     <div class="box-9">
178         <div class="column">
179             <span class="item"></span>
180             <span class="item"></span>
181             <span class="item"></span>
182         </div>
183         <div class="column">
184             <span class="item"></span>
185             <span class="item"></span>
186             <span class="item"></span>
187         </div>
188         <div class="column">
189             <span class="item"></span>
190             <span class="item"></span>
191             <span class="item"></span>
192         </div>
193     </div>
194 </body>
195 
196 </html>

View Code