Flex布局以及几种常见布局的实现

1.flex布局

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，

它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

flex（灵活的，弹性的）：一种非常强大的布局，如果你还在使用传统布局，那你就需要更新你的知识库。

float浮动
position
负边距
display:inline-block

2.直奔主题

flex布局的特点

• flex布局没有方向

• flex布局空间自由分配，自动对齐

• flex布局仅仅用于简单的线性布局

3.flex的12大属性值

对于父元素的6大属性display:flex

1. (主轴方向)flex-derection:row/column/row-reverse/column-reverse

2. (换行)flex-wrap: wrap/nowrap/wrap-reverse(分别是第一行在上方、不换行、第一行在下方)

3. flex-flow上面2个的综合

4. (主轴的对齐方向)justify-content:center/flex-start/flex-end/space-around/space-between

5. (侧轴的对齐方向)align-items:center/flex-end/flex-start/stretch/baseline

6. (多行列的对齐方向，用的很少)align-content

4.对于子元素的6大属性(flex-item)

1. flex-grow（定义项目的放大比例，默认为0，如果所有项目都是1，则等分空间）

2. flex-shrink（定义缩小比例，都为1时，空间不足的情况下，都会等比例缩小）

3. flex-basis（计算主轴是否有多余空间，默认是auto，即项目本来的大小）

4. flex （上面三个的综合）

5. order（数值越小，排列越靠前，默认为0。）

6. align-self （定义单个项目的独有的对齐方式，覆盖父元素的align-item属性）

基于flex的布局应用

左侧固定，主要内容自适应

.container{
  display: flex;
}
.container aslide{
  width: 100px;
  height: 80px;
  background: #f00;
  flex-basis: 100px;
}
.container main{
  flex-grow: 1;
  background: #0f0;
  margin-left: 10px;
}

• 链接

三栏布局

.layout{
  display: flex;
}
.layout_left{
  width: 100px;
  height: 80px;
  background: #000;
}
.layout_main{
  flex-grow:1;
  background: #00f;
}
.layout_right{
  width: 100px;
  height: 80px;
  background: #0f0;
}

• 链接

手机布局

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  display: flex;
  height: 100vh;
  flex-direction: column;
}
header .header{
   height: 100px;
}
header,footer{
  height: 70px;
  background: #000;
  color:#fff;
}
main{
  flex-grow:1;
  overflow:auto;
}

链接

负边距解法

*{margin:0;padding:0}
li{list-style:none}
ul{
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border:1px solid black;
  margin:auto;
  justify-content: space-between;
}
ul>li{
  width: 250px;
  height: 100px;
  background: #0f0;
  margin: 10px 0;
}

链接

绝对垂直水平居中

.parent{
  display: flex;
  height: 500px;
  background: #ddd;
  align-items: center;
  justify-content:center;
}
.child{
  border:1px solid red;
}

链接