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

2018-02-23  本文已影响0人  YangJeremy

1.flex布局

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

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

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

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

2.直奔主题

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;
}

链接

上一篇 下一篇

猜你喜欢

热点阅读