【CSS3】 CSS3: Flex Box

1. What is Flex layout

2. How to specify a container as Flex layout

3. Basic syntax of Flex

1. display

2. flex-direction

3. justify-content

4. align-items

5. flew-wrap

6. align-self

7. flex-flow

8. flex

9. order

4. Example

1. Dice layout

2. Holy Grail layout

5. Reference article

1. What is Flex layout? The traditional solution for layout is based on the box model and relies on the display attribute + position attribute + float attribute. It is very inconvenient for those special layouts. For example, vertical centering is not easy to achieve. Flex layout is a layout solution proposed by the W3C organization in 2009, which can realize various page layouts simply, completely and responsively. Currently, it is supported by all browsers. Flex layout will become the preferred solution for future layout.

Second, how to specify a container as Flex layout

You only need to add the display attribute with a value of flex in the container.

.box{
  display: flex;
}

Three, the basic syntax of Flex

display

Syntax: display:flex;

Specify Flex.

flex-direction

Syntax:

flex

-direction: row | row-reverse | column | column-reverse

Specifies the order in which flexible child elements are arranged in the parent container. This can also be achieved equivalently by setting direction:rtl; or direction:ltr; , where rtl and ltr are right Abbreviation for to left, left to right. justify content

Syntax:

justify

-content: flex-start | flex-end | center | space-between | space- around

Content The justify-content property is applied to the flex container to align the flex items along the main axis of the flex container. Concept understanding diagram:

For space-around, the author summarized a simple formula:

x=(W₂-N*W₁)/(2N)

x: the width left on the two most sides.

W₂: It is the width of the module.

W₁: The width of a submodule (even each).

N:

align-items

Syntax: align-items: flex-start | flex-end | center | baseline | stretch

Set the flexible box element in the side axis (vertical axis) direction alignment on.

The following picture can help readers understand the baseline:

flex-wrap

Syntax: flex-flow :nowrap| warp | warp-reverse

align-content

Syntax: align-content: flex-start | flex-end | center | space-between | space-around | stretch

Set the alignment of each row.

align-self

Syntax: align-self: auto | flex-start | flex-end | center | baseline | stretch

Set the alignment of the elastic element itself in the cross-axis direction. This attribute should be distinguished from align-content. The scope of align-content is each row, but align-self is only a certain elastic element in a certain row.

flex-flow

Syntax: abbreviation for flex-direction and flex-wrap.

flex

Syntax: flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Specify the element allocation space. It should be noted that if flex-basis is 100%, then the flex module will occupy a separate line.

oder

Syntax: order: number|initial|inherit;

Specifies the order of elastic modules. The smaller the value, the higher the priority. It can be a negative value.

Four, example

1, layout of the dice

Up to 9 points can be placed on one side of the dice.

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板一律如下。

<p class="box">  <span class="item">>>

上面代码中，p元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {  display: flex;}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

设置交叉轴对齐方式，可以垂直移动主轴。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 双项目

.box {  display: flex;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: center;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: flex-end;}

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}

.box {  display: flex;  
justify-content: space-between;}.item:nth-child(2) {  align-self: flex-end;}

1.3 三项目

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}.item:nth-child(3) {  
align-self: flex-end;}

1.4 四项目

.box {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  
align-content: space-between;}

HTML代码如下。

<p class="box">  <p class="column"><span class="item">><span class="item">>  >  
<p class="column"><span class="item">><span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}
.column {  flex-basis: 100%;  display: flex;  justify-content: space-between;}

1.5 六项目

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}

.box {  display: flex;  
flex-direction: column;  
flex-wrap: wrap;  
align-content: space-between;
}

HTML代码如下。

<p class="box">  <p class="row"><span class="item">>
<span class="item">><span class="item">>  >  <p class="row"><span class="item">>  >  
<p class="row"> <span class="item">> <span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;}
.row{  flex-basis: 100%;  display:flex;}
.row:nth-child(2){  justify-content: center;}
.row:nth-child(3){  justify-content: space-between;}

1.6 九项目

.box {  display: flex;  flex-wrap: wrap;}

2,圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下：

<p class="flex-container">
  <header class="header">头部header>
  <article class="main"><p>主体p>
  article>
  <aside class="aside aside1">边栏 1aside>
  <aside class="aside aside2">边栏 2aside>
  <footer class="footer">底部footer>p>

CSS代码入下：

.flex-container {
display: -webkit-flex;display: flex;  
    -webkit-flex-flow: row wrap;flex-flow: row wrap;font-weight: bold;text-align: center;
}
.flex-container > * {padding: 10px;flex: 1 100%;
}
.main {text-align: left;background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}@media all and (min-width: 600px) {.aside { flex: 1 auto; }}

@media all and (min-width: 800px) {
.main    
{ 
flex: 3 0px; 
}
.aside1 
{ 
order: 1; 
} 
    .main    
    { order: 2; 
    }
    .aside2 { order: 3; }
    .footer  
    { 
    order: 4; 
    }
    }

以上就是【CSS3】 CSS3:弹性盒子（Flex Box）的内容，更多相关内容请关注PHP中文网（www.php.cn）！