【一】Flex -container

1.png
2.png 3.png

1.加在flex-container上的属性

4.png

1.1 关于方向flex-direction:row/row-reverse/column/column-reverse

1.1.1 flex-direction:row

是默认值是横向布局 ，如果元素超出会挤在一起
html这样写

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

然后css这样写

.parent{
  background:#aaa;
  display:flex;
  flex-direction:row
}
.child{
  height:50px;
  width:50px;
  margin:0 10px;
  background:#fff;
}

效果如下：

image.png

1.1.2 flex-direction:row-reverse

将css改为

flex-direction:row-reverse

效果如下

image.png

1.1.3 flex-direction:column

将css改为

flex-direction:column

效果如下：

image.png

1.1.4 flex-direction:column-reverse

image.png

1.2 关于换行 flex-wrap:nowrap(默认值)/wrap

1.2.1 flex-wrap:nowrap 不换行

html这样写

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>  
</div>

然后css这样写

.parent{
  background:#aaa;
  display:flex;
}
.child{
  height:50px;
  width:50px;
  margin:5px 10px;
  background:#fff;
}

效果如下
不换行，如果超出父元素则会缩小宽度挤在一起

image.png

1.2.2 flex-wrap:wrap 换行

css写为

flex-wrap:wrap

效果如下

image.png

1.3 flex-flow:row nowrap 是flex-direction 与flex-wrap的简写

flex-flow:row nowrap

等于

flex-direction:row
flex-wrap:nowrap

1.4 主轴方向对齐方式 justify-content :center/flex-end/flex-start/space-around/space-between

1.4.1 把元素放在中间 justify-content:center

html这样写

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

然后css这样写

.parent{
  background:#aaa;
  display:flex;
  justify-content:center;
}
.child{
  height:50px;
  width:50px;
  border:1px solid #000;
  background:#fff;
}

效果：

image.png

1.4.2 把元素放末尾 justify-content:flex-end

将css改为

 justify-content:flex-end;

效果：

image.png

1.4.3（默认值） 把元素放开头 justify-content:flex-start

css改为

justify-content:flex-start

效果：

image.png

1.4.4 让留白分布在周围 justify-content:space-around

css改为

justify-content:space-around

效果：

image.png

1.4.5 让留白分布在中间 justify-content:space-between

css改为

justify-content:space-between

效果：

image.png

1.5 侧轴对齐方式 align-items:stretch(默认值)/center/flex-end/flex-start

1.5.1 align-items:stretch(默认值)将元素伸开，伸到和最高的元素一样高。注意高度不要写死否则不起作用

html这样写

<div class="parent">
  <div class="child1">1</div>
  <div class="child2">2</div>
  <div class="child3">3</div>
</div>

css这样写

.parent{
  background:#aaa;
  display:flex;
  align-items:stretch
}
.parent div{
  border:1px solid #000;
  background:#fff;
  margin-right:30px;
}
.child1{
  height:100px;
  width:50px;
}
.child2{
  width:50px;
}
.child3{
  width:50px;
}

效果:

image.png

1.5.2在侧轴中心处 align-items:center

html这样写

<div class="parent">
  <div class="child1">1</div>
  <div class="child2">2<br>2</div>
  <div class="child3">3</div>
</div>

css:

  align-items:center

效果：

image.png

1.5.3在侧轴末尾 align-items:flex-end

css

align-items:flex-end

效果：

image.png

1.5.4在侧轴开端 align-items:flex-start

css

.parent{display:flex; align-items:flex-start}

效果：

image.png