布局

发表于 | 分类于 |
字数统计: 571 | 阅读时长 ≈ 2

Flex 弹性布局

用来为盒元素提供最大的灵活性，任何一个容器都可以指定为Flex布局。
行内元素也可以通过inline-flex使属性值用Flex布局
inline-flex和inline-block一样
对该属性元素的子元素是flex,对外是inline

属性：
order: 排列顺序，越小越靠前
flex-grow: 放大比例
flex-shrink: 缩小比例
flex-basis: 理想宽度
flex（flex-grow,flex-shrink,flex-basis）
flex-direction：子元素的排列方式 row | column | row-reserve | column-reserve 

1
2
3
4
5
6
7

display: flex;
justify-content: center;/*水平居中*/
align-items: center; /*垂直居中*/


flex-wrap: wrap;/*换行*/

如何兼容低IE（10及以下）
父：display: flex
子：float: left

flex:1 即设了3个属性 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
flex取负值的时候，该数字为flex-grow的值
设flex为1，可以得到剩余高度
假设a是父，用flex布局设置子控件左右居中
a display: flex; width: 400px;
b 在左 width: 150px
c 在右 width不给 flex：1

=》c.width = a.width - 2(a.padding+a.margin) - b.width - 2(b.padding+b.margin) - 2(c.padding+c.margin)

三栏布局

Flex实现三栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
    display: flex;
}
.center {
    background-color: red;
    width: 100%;
    order: 2;
}
.left {
    background-color: green;
    width: 200px;
    flex-shrink: 0;
    order: 1;
}
.right {
    background-color: blue;
    width: 200px;
    flex-shrink: 0;
    order: 3;
}

BFC实现三栏布局 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.container {
    overflow: hidden;
    position: relative;
}
.container > div{
    display: table-cell;
    height: 100%;
}
.center {
    width: 100%;
    background-color: red;
}
.left {
    width: 200px;
    background-color: green;
    min-width: 200px;
}
.right{
    width: 200px;
    background-color: blue;
    min-width: 200px;
}

瀑布流式布局

1
2
3
4
5
6
7
.container {
    column-count: 4; //多列的列数
    column-gap: 0;//列间距 }

.item{
    break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）。
}

水平居中

  • 行内元素 text-align center
  • block元素 margin为 0 auto
  • absolute 元素 left为50%；margin-left 为元素宽度的负一半

垂直居中

  • 行内元素 line-height 为height
  • absolute元素
    top为50%；margin-top 为高度的负一半
 transform:translate(-50%,-50%)
 top left right bottom 为0 ;margin为auto

解决高度塌陷

加一个空的子div清除浮动或者利用伪类如下

1
2
3
4
.box1::after{
    display: block;
    clear: both;
}

最终解决高度塌陷和外边距重叠 

1
2
3
4
5
6
/*clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题*/
.clearfix::before,
.clearfix::after{
    display: table;
    clear: both;
 }