flex布局总结

andy凌云
245 阅读4分钟

Flex是Flexible Box的缩写，顾名思义为“弹性布局”。任何一个容器都可以指定为flex布局。父元素称为flex容器(flex container), 简称'容器'。子元素称为flex项目(flex item), 简称'项目' 。 容器默认存在两根轴 : 水平主轴(main axis)和垂直交叉轴(cross axis)。

1.常用flex布局

//1.设置水平垂直居中
.parent {
    display: flex; 
    justify-content: center;
    align-items: center;
}
//2.左右定宽，中间自适应(即圣杯布局)
.parent{
    display:flex;
    height:100%;
}
.left, .right{
    width:100px;
}
.specialChild{
    flex-grow: 1; 
}
//3. 头脚固定高度,中间自适应占满剩余屏幕
body,html{
	height: 100%;
}
#container{
	display: flex;
	flex-direction: column;
	height: 100%;
}
#header, #footer{
	height: 100px;
}
#main{
	flex: auto;
}
//4. display:flex属性 justify-content: space-between换行后的排版问题。
// 换行后左右布局是不合理的。
.wrap {
    width: 400px;
    display:flex;  /*弹性盒子*/
    justify-content: space-between;  /*两端对齐，子元素之间有间隙*/
    flex-flow: row wrap;/*子元素溢出父容器时换行*/
}
// 解决办法，方法1:追加一个空的子元素
.wrap:after {content: ""; width: 120px; } 
/* 方法2: 方法1有一个缺陷。无法准确掌握需要空出的宽度，且自适应不好。
所以方法2是在多出的一行中添加空的list。 比如,父元素flex布局的元素中，
有5个子div,布局要求每行只显示4个div。那么就在尾部加3个空的div。 */

最常用属性

父元素:
    display: flex // 使用flex布局
    flex-direction: row(横向) | column(纵向)
    justify-content: center | space-between | space-around // 水平轴上居中对齐 / 两端对齐 / 间隔相等对齐
    align-items: center | baseline // 垂直轴上居中对齐 / 基线对齐
    flex-wrap: wrap | wrap-reverse // 换行 / 换行，且新元素位于上面一行
子元素：
    flex-grow: 1 // 子元素平分剩余空间
    flex: none | auto

2.以下6个属性设置在容器(父元素)上

  • flex-direction: 决定主轴的方向，即项目的排列方向
flex-direction: row(默认) | row-reverse | column | column-reverse
  • flex-wrap: 横向排列方式
flex-wrap: nowrap（默认） | wrap | wrap-reverse
  • flex-flow: flex-direction属性和flex-wrap属性的简写形式 。 默认row nowrap
flex-flow: <flex-direction> || <flex-wrap>
  • justify-content: 项目在主轴上的对齐方式
justify-content: flex-start(默认) | flex-end | center | space-between | space-around  
space-between: // 两端对齐，项目之间的间隔都相等
space-around: // 每个项目两侧的间隔相等。 所以，项目之间的间隔比项目与边框的间隔大一倍
  • align-items: 项目在交叉轴上的对齐方式
align-items: stretch(默认) | flex-start | flex-end | center | baseline
  • align-content: 定义多跟轴线对齐方式，若项目只有一根轴线，属性不起作用
align-content: stretch(默认) | flex-start | flex-end | center | space-between | space-around

3. 以下6个属性设置在项目(子元素)上

  • order: 项目排列顺序

    默认为0，数值越小，排列越靠前，允许负值

  • flex-grow: 项目放大比例

    默认为0。即若存在剩余空间,也不放大。若都为1,将等分剩余空间(若有的话)。 若一项目为2，其他都为1，前者占据空间比其他项多一倍

  • flex-shrink: 项目缩小比例

    默认为1。若空间不足，该项目将缩小。 负值对该属性无效

  • flex-basis: 分配多余空间前，项目占据的主轴空间(main size)

    默认为auto,即项目本来大小。 它可以设为跟width和height一样的值(比如 350px),则项目将占据固定空间

  • flex: flex-grow, flex-shrink和flex-basis的简写

    默认为0 1 auto。 后两个属性可选，该属性有两个快捷键值: auto(1 1 auto) 和 none(0 0 auto);

  • align-self: 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items

默认为auto，表示继承父元素的align-items属性。若没有父元素，等同于 stretch align-self: auto | flex-start | flex-end | center | baseline | stretch

4.一些需要注意的点

  1. 行内元素使用flex布局设置 display: inline-flex

  2. 设为flex布局以后，子元素的float、clear和vertical-align属性都将失效

  3. 在使用flex布局的父容器中,子元素依然可以使用flex布局

  4. 在将flex-direction设置为 column(纵向)时,主轴和交叉轴正好相反，在设置水平对齐和垂直对齐的时候要注意下

avatar
文章
阅读
粉丝