CSS flex Layout Study Notes

EDITORIAL

Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model.

Any container can be specified as Flex layout.

Using Flex layout elements, called Flex container (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item).

flex container

Default container exists two axes: a horizontal spindle (main axis) and vertical axis intersect (cross axis). The start position of the spindle (intersection with border) is called main start, the end position is called main end; called cross-axis start position cross start, end position is called cross end.

Which have common attributes and elements on the container under the following Learn

Properties on the container

flex-direction

Elements in the container placed in the direction

Note that when you reverse the direction of the row or column, flex-start flex-end and also turned in the direction corresponding to the
note at the time when as a flex direction, justify-content longitudinal alignment control, align-items transversely aligned Control

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上

flex-wrap

Let elements wrap the container display

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行

justify-content (common)

Main (horizontal) alignment

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between: 多余的空白间距只在元素中间区域分配 
space-around: around是环绕的意思，元素周围保持相等的距离，空白间距在元素的周围
space-evenly: evenly是匀称、平等的意思，每个flex子项两侧空白间距完全相等

align-items (common)

Cross-axis (vertical) alignment

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器

align-content

Spacing between rows and rows decision

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。

Attribute on the element

order

Order attribute defines the order item. The smaller the value, the more forward arrangement, the default is 0

flex-grow (common)

enlarged scale flex-grow item attribute definition, the default is 0, i.e., if there is free space, not enlarged.
If the flex-grow attributes of all items are 1, they will aliquots remaining space (if any).
Flex-grow property if a project is 2, other projects are 1, the remaining space is occupied by the former than the other items more than doubled

flex-shrink

flex-shrink attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced.
If the flex-shrink attribute all items are 1, when the lack of space, will be scaled down.
Flex-shrink property if a project is zero, other projects are 1, when the lack of space, the former does not shrink.

Invalid negative value of the property.

flex-basis

flex-basis attribute defines the spindle space before allocating extra space, occupied by the project (main size). Browser Based on this property, calculate the spindle if there is extra space. The default is auto, that would have been the size of the project

flex

flex properties are flex-grow, flex-shrink and flex-basis shorthand, default value 0 1 auto. After two optional attributes

align-self

May be provided with a single element with other elements is not the same alignment

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器

Exercise

Average realized a layout

By providing itema layer of the sleeve element item-wrap, then item-wrapthe left and right set negative margin-left,margin-rightachieved Average layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="item-wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
</body>
</html>

.container{
  width: 800px;
  margin: 0 auto;
  border: 1px solid red;
}
.item-wrap{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.item{
  width: calc(25% - 8px);
  height: 194px;
  background: #ddd;
  margin: 4px;
}

Average layout

online preview

Achieve the Holy Grail layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="header">header</div>
  <div class="main">
    <div class="nav">nav</div>
    <div class="content">content</div>
    <div class="aside">aside</div>
  </div>
  <div class="footer">footer</div>
</div>
</body>
</html>

.container{
  display: flex;
  flex-direction: column;
}
.container > .header{
  height: 50px;
  background: #eee;

}
.container > .main{
  display: flex;
  height: calc(100vh - 100px);
}
.container > .main >.nav,
.container > .main >.aside
{
  width: 230px;
  background-color: #ddd;
}
.container > .main >.content{
  flex: 1;
  background: #fff;
}
.container> .footer{
  height: 50px;
  background: #eee;
}

Holy Grail layout