flex布局语法

文章目录

前言

弹性盒子是css3的一种新的布局模式。随着浏览器的发展，flex（弹性盒子）目前已经得到所有浏览器的支持。

相对于传统的布局display+position+float而言在一些特定情况flex有着天然的优势，比如垂直居中。所以在面试时flex会是css的重点， 

一、flex是什么？

flex是Flexible Box的缩写，为弹性盒子

flex（弹性盒子）是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当行为的布局模式。引入flex是为了提供一种更加高效的方式来对容器中的子元素进行排列、对其和分配空白空间

二、使用方法

    .box{
        display: flex;
    }
// 行内元素也可以使用flex
    .box{
        display: inline-flex;
    }
//Webkit内核的浏览器必须加上-webkit前缀
    .box{
        display: -webkit-flex;
    }
    .box{
        display: -webkit-inline-flex;
    }

1.父元素的属性

flex-direction        设置主轴的方向

flex-wrap              设置换行方式

flex-flow                flex-direction和flex-flow的结合

justify-content       设置子元素在主轴上的对其方式

align-items            设置子元素在交叉轴上的对其方式

align-content         设置多根轴线的对其方式

代码如下（示例）：

1.1 flex-direction         主轴方向

父元素默认存在两根轴：水平的主轴和垂直的交叉轴。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
//row(默认值)      主轴为水平方向，起点在左端。
//row-reverse      主轴为水平方向，起点在右端。
//column           主轴为垂直方向，起点在上沿。
//column-reverse   主轴为垂直方向，起点在下沿。

1.2 flex-wrap                换行方式

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}
//nowrap          (默认值)不换行
//wrap            换行，第二行在下方
//wrap-reverse    换行，第二行在上方

1.3 flex-flow                 flex-direction和flex-flow的结合

.box {
    flex-flow: <flex-direction> & <flex-wrap>;
}

1.4 justify-content      主轴对其方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
//flex-start        (默认值):左对齐
//flex-end          右对齐
//center            居中
//space-between     两端对齐，项目之间的间隔都相等。
//space-around      每个子元素两侧的间隔相等,元素与元素之间的间隔是元素与边框的两倍

1.5 align-items             交叉轴对其方式

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
//flex-start：    交叉轴的起点对齐。
//flex-end：      交叉轴的终点对齐。
//center：        交叉轴的中点对齐。
//baseline:       项目的第一行文字的基线对齐。
//stretch         （默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。

1.6 align-content          多根轴线对其方式

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start      与交叉轴的起点对齐。
flex-end        与交叉轴的终点对齐。
center          与交叉轴的中点对齐。
space-between   与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around    每个轴线两侧的间隔相等,轴线与轴线之间的间隔是轴线与边框的两倍
stretch         (默认值):轴线占满整个交叉轴。

2.子元素的属性

order                设置排列顺序，数值越小顺序越靠前

flex-grow          设置元素的放大比例，默认0即存在剩余空间不放大

flex-shrink        设置元素的缩小比例，默认为1即空间不足被缩小

flex-basis          设置项目在分配多余空间之前固定的大小，默认为auto即项目本身大小

flex                    flex-grow、flex-shrink和flex-basis的缩写，默认为0 1 auto，可填入快捷值auto或none。auto为“1 1 auto”、none为“0 0 auto”

align-self            设置单个元素的对其方式，可不同于其他元素且会覆盖父元素的align-items

2.1 order                排列顺序

.el {
  order: <integer>;
}
//默认0

2.2 flex-grow          放大比例

.el {
    flex-grow: <number>;
}
//默认0，即存在剩余空间也不放大

2.3 flex-shrink        缩小比例

.el {
  flex-shrink: <number>;
}
//默认1

2.4 flex-basis          固定大小

.el {
  flex-basis: <length> | auto; 
}
// 默认auto

2.5 flex

flex-grow、flex-shrink和flex-basis的缩写，默认为0 1 auto，可填入快捷值auto或none。auto为“1 1 auto”、none为“0 0 auto”

.el {
  flex: none | auto | <'flex-grow'> <'flex-shrink'> <'flex-basis'>
}
//默认为 "0 1 auto"

2.6 align-self            单个元素对其方式

align-self属性可以让单个子元素与其他子元素拥有不同的对其方式

默认值为auto 即继承父元素的align-items如父元素没有align-items 则和stretch效果一样

.el {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
//除auto外其他值等同于align-items的值