CSS3 Flex layout Detailed explanation of Flexbox properties_html/css_WEB-ITnose

Original text: A Visual Guide to CSS3 Flexbox Properties

Flex layout is officially called the CSS Flexble Box layout model is CSS3 has a new layout model that improves the alignment, direction, and order of elements within a container, even if they are dynamic or of indeterminate size. The main feature of the Flex container is the ability to adjust its child elements to fill the appropriate space in the most suitable way on different screen sizes.

Many designers and developers find Flex layout easy to use. It is simple to position elements so many complex layouts can be implemented with very little code, leading to a simpler development process. The Flex layout algorithm is based on direction, which is different from horizontal or vertical block and inline layout. This Flex layout can be used in small application components, while the CSS3 grid layout model is emerging to handle large-scale layout.

This article mainly explains how each attribute of flex vividly affects the layout.

1. Basic concepts:

Before starting to describe the Flexbox properties, let’s briefly introduce the Flexbox model. The Flex layout is called by the parent container A Flex container (flex-container) and its direct child elements are called flex items (flex-item), which are referred to as "containers" and "items" below.

In the image above you can see the attributes and terms, you can read the official W3C documentation to understand what they mean.

The flex container has two reference axes: the horizontal main axis and the cross axis.

The starting position of the main axis is main start, and the ending position of the main axis is main end;

The starting position of the cross axis is called cross start, and the end position is called cross end;

Direct child element" "Items" are arranged along the main axis;

The main axis space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

Flexbox is a new layout solution proposed by W3C in 2009. The latest standard in October 2014 is used here, and its latest browser support is

Chrome 29

Firefox 28

Internet Explorer 11

Opera 17

Safari 6.1 (prefixed with -webkit-)

Android 4.4

iOS 7.1 (prefixed with -webkit-)

2. Usage:

Use flex layout first on the parent element in HTML Set the display attribute:

Or if you want it to be like an inline element, you can write it like this:

.flex-container {    display: -webkit-flex; /* Safari */    display: flex;}

.flex-container {  display: -webkit-inline-flex; /* Safari */  display: inline-flex;}

Note: This is the only requirement Property set on the parent container, all direct child elements will become automatic flex items.

3. Properties of flexbox container:

This property specifies how Flex items are arranged in the flex container. Set flex The main axis of the container, the two main directions in which they (items) are arranged, horizontally like a row or vertically like a column.

flex-direction:row(默认值) | row-reverse | column | column-reverse;

values:

The row direction indicates that flex items are stacked in the container from left to right in a row.

.flex-container {  -webkit-flex-direction: row; /* Safari */  flex-direction:         row;}

The row-reverse direction indicates that flex items are stacked from right to left.

.flex-container {  -webkit-flex-direction: row-reverse; /* Safari */  flex-direction:         row-reverse;}

.flex-container {  -webkit-flex-direction: column; /* Safari */  flex-direction:         column;}

column direction specifies that flex items are in a column Stack from top to bottom

.flex-container {  -webkit-flex-direction: column-reverse; /* Safari */  flex-direction:         column-reverse;}

The column-reverse direction specifies that flex items are stacked in a column from bottom to top

Initially, the idea of ​​Flexbox is that all items are arranged on a line (the axis). The flex-wrap property controls whether the container arranges its items in one or more rows, and controls the direction in which new rows are stacked.

 flex-wrap:nowrap(默认值) | wrap | wrap-reverse;

values:

The flex items will be arranged in a line and they will scale to fit the width of the container.

.flex-container {  -webkit-flex-wrap: nowrap; /* Safari */  flex-wrap:         nowrap;}

.flex-container {  -webkit-flex-wrap: wrap; /* Safari */  flex-wrap:         wrap;}

Items (flex items) will be displayed on multiple lines, if necessary they can be Arrange from left to right or top to bottom.

.flex-container {  -webkit-flex-wrap: wrap-reverse; /* Safari */  flex-wrap:         wrap-reverse;}

This attribute is the abbreviation of the above two attributes. The former parameter sets flex-direction, and the latter parameter sets flex-wrap;

 flex-flow: <flex-direction> || <flex-wrap>;

values:

.flex-container {  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */  flex-flow:         <flex-direction> || <flex-wrap>;}

Default value: row nowarp

 justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;

Defines the alignment of the items on the main axis of the container. When the items in the container are all in one row and are inelastic, or when the items are elastic but have reached their minimum width, this attribute can define the remaining space in the container. Allocation of space.

values:

.flex-container {  -webkit-justify-content: flex-start; /* Safari */          flex-start;}

All items aligned to the left of the container

Align all items to the right of the container

.flex-container {  -webkit-justify-content: flex-end; /* Safari */  justify-content:         flex-end;}

All items are centered in the container

.flex-container {  -webkit-justify-content: center; /* Safari */  justify-content:         center;}

.flex-container {  -webkit-justify-content: space-between; /* Safari */  justify-content:         space-between;}

第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分

.flex-container {  -webkit-justify-content: space-around; /* Safari */  justify-content:         space-around;}

所有的项目等分剩余的容器空间，包括第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(默认值);

定义项目在交叉轴上的对齐方式，交叉轴与当前的轴线有关系，与justify-content很相似，只不过是垂直方向的；这属性为所有的项目设置默认的交叉轴上的对齐方式，包括匿名的。

values：

.flex-container {  -webkit-align-items: stretch; /* Safari */  align-items:         stretch;}

项目会填充容器的整个高或者宽(fill the whole height )，从容器交叉轴的起点到交叉轴的结束点。

.flex-container {  -webkit-align-items: flex-start; /* Safari */  align-items:         flex-start;}

项目会堆放在容器交叉轴的起始位置（cross start ）。

.flex-container {  -webkit-align-items: flex-end; /* Safari */  align-items:         flex-end;}

项目会堆放在容器交叉轴的结束位置（cross end ）。

.flex-container {  -webkit-align-items: center; /* Safari */  align-items:         center;}

项目会堆放在容器交叉轴的居中位置（ center of the cross axis ）

.flex-container {  -webkit-align-items: baseline; /* Safari */  align-items:         baseline;}

所有项目的基线会对齐

基线？不知道基线是什么请戳这里-->基线是什么?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);

当交叉轴上还有多余的空间时它定了多行的对齐方式，类似justify-content在主轴上对齐所有项目的方式一样。

values：

.flex-container {  -webkit-align-content: stretch; /* Safari */  align-content:         stretch;}

每一行的项目后面等比分配了交叉轴上的多余空间。

.flex-container {  -webkit-align-content: flex-start; /* Safari */  align-content:         flex-start;}

项目在容器的交叉轴起始点上堆放在一起。

.flex-container {  -webkit-align-content: flex-end; /* Safari */  align-content:         flex-end;}

项目在容器的交叉轴结束点上堆放在一起。

.flex-container {  -webkit-align-content: center; /* Safari */  align-content:         center;}

项目的行被堆放在容器的交叉轴线中间。

.flex-container {  -webkit-align-content: space-between; /* Safari */  align-content:         space-between;}

与justify-content类似，项目的行距离在容器的交叉轴线上被等分，第一行和末尾的一行与容器的边缘对齐。

.flex-container {  -webkit-align-content: space-around; /* Safari */  align-content:         space-around;}

与justify-content类似，项目的行等分了容器的交叉线上的剩余空间，第一行和最后一行同样也得到了一些，它们之间的间隔比首行和末行到容器边界的间隔大一倍。

注意：这个属性仅仅当容器中有多行的项目时有效，如果所有项目仅仅占一行，那这个属性对布局没有任何影响。

4、Flexbox 项目属性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

order属性控制容器的直接子元素在容器中的顺序，默认在容器中这些项目是以该数字递增的方式排列的。

values:

values:.flex-item {  -webkit-order: <integer>; /* Safari */  order:         <integer>;}

该属性可以很简单的控制项目的顺序，而不用在HTML代码里面做调整。这个整形值可以为负数，默认值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

该属性指定项目的生长因素，它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
values:

.flex-item {  -webkit-flex-grow: <number>; /* Safari */  flex-grow:         <number>;}

当所有的项目的flex-grow值相等的时候它们的size相同。

第二个项目占用了更多的剩余空间。

默认值是：0
注意：负数在这个属性中是没有用的

flex-shrink: <number>

该属性指定了项目的收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

values:

.flex-item {  -webkit-flex-shrink: <number>; /* Safari */  flex-shrink:         ;}

默认情况下，所有的项目都会收缩，但是当我们设置该属性的值为0的时候，项目会保持原有的大小。


默认值是：1
注意：负数在这个属性中是没有用的

flex-basis：auto | <width>

该属性的值和width和height的取值一样，在 flex factors分配剩余空间之前指定项目的初始的大小。

values:

.flex-item {  -webkit-flex-basis: auto | <width>; /* Safari */  flex-basis:         auto | <width>;}

默认值：auto

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

该属性是flex-grow, flex-shrink 和flex-basis的缩写形式，同时属性值也有简写：auto表示(1,1,auto)，none表示(0,0,auto)

values:

.flex-item {  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];}

注意： W3C鼓励使用flex的简写形式，因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

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

该属性和容器的align-items属性有同样的作用，它是用在单一的项目上的，可以完全压倒容器中align-items定义的对齐方式。
values:

.flex-item {  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */  align-self:         auto | flex-start | flex-end | center | baseline | stretch;}

注意：auto 表示项目会使用父元素（容器）的align-items的值，如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align这些属性对于项目(flex item)会失效。