flex 布局

2017-10-09 本文已影响0人李奕锦liyijin

Flex之前我们用什么布局
主要使用
1、normal flow (正常流，也叫文档流)
2、float + clear
3、position relative + absolute
4、display inline-block
5、负 margin

flex
一种新的布局方式---Flex 布局
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex 布局可以实现空间自动分配、自动对齐 (flexible:弹性、灵活)
3、flex 适用于简单的线性布局，更复杂的布局要交给 grid 布局

flex 布局代码例子

clipboard1.png

基本概念图

clipboard2.png

flex container 的属性

clipboard3.png

flex-wrap

clipboard4.png

flex-flow

clipboard5.png

justify-content:space-between

clipboard6.png

align-items

clipboard7.png

align-items: stretch

clipboard8.png

align-content

clipboard9.png

flex item 的属性

clipboard10.png

flex-shrink

clipboard11.png

clipboard12.png

align-self

clipboard13.png
手机页面布局