如何选取布局

布局

  • 图片来自饥人谷

Float布局

  1. 子元素上加float:left和width
  2. 父元素classname上加 clearfix
1
2
3
4
5

clearfix{
    content:'';
    display:block;
    clear:both;
}

Flex布局

  • container容器
  • items内容
1
2
3

.container{
    display:flex;
}
  • 改变items流向flex-direction
  • flex-wrap:wrap变为换行的，默认nowrap不换行
  • justify-contentflex-start,flex-end,center,space-between(分散，顶着两边),space-around(分散，两边有空),space-evenly(孔隙一样)
  • align-itemscenter(让次轴的items居中),flex-end(都往下顶)，stretch(无高度情况下内容会将它们拉伸的一样高)
  • items{order:1}顺序，默认是0，可以为负
  • flex-grow,flex-shrink变胖变瘦

重点：

  • display:flex
  • flex-direction:row/column
  • flex-wrap:wrap
  • justify-content:center/space-between
  • align-items:center

Grid布局

KIA74g.png

  • grid-row/column-start/end从第几根线开始，第几根结束
  • grid-template-columns:1fr 1fr 2fr;表示几份
  • grid-template-areas:"header header header" "aside main ad" ". footer footer"可以写成名字，.代表空
1
2
3

items{
    grid-area:header
}
  • grid-column/row-gap中间间隔