flex布局有哪些常用语法?

前言:

由于移动端和PC端的特点不同，二者用的布局方式也不同。PC端的屏幕大，浏览器繁多，更多时候需要考虑兼容性问题，所以PC端的布局方式一般为：浮动+定位+标准流。但移动端则不同，屏幕小几乎不需要考虑兼容性问题，可以放心使用CSS中的新特性：flex布局，不仅可以提升布局效率，使用起来也更加简单灵活。

1.flex布局语法

display:flex;

注意:需要把谁变成弹性盒子就给谁添加  一定要加给上一级的父元素!

2.主轴对齐方式(主轴默认为X轴 主轴方向可以改变)

语法:  justify-content:  属性值 (以下6种)

flex-start   默认值 从起点依次排列 (紧紧贴合 毫无缝隙)

注意: X轴为主轴时 从左往右排列 ;Y轴为主轴时 从上往下排列

 flex-end  从终点依次排列(和flex-start的排列顺序相反)

注意: X轴为主轴时 从右往左排列 ;Y轴为主轴时 从下往上排列

 space-around 左右两边都有空隙 比例为1:2

 如下图所示:

space-between 两边完全没有空隙 中间空隙均匀分布

如下图所示:

space-evenly 所有的空隙一样大 比例为1:1

如下图所示:

 center  盒子居中 (所有元素在中间紧靠在一起)

如下图所示:

 3.侧轴对齐方式

flex-start   

flex-end

center

注意:以上三种属性和主轴对齐方式一样

stretch  默认效果 弹性盒子沿着侧轴线被拉伸至铺满容器

 4.伸缩比   (分配剩余的父级空间)

语法:     flex:1;

比如有一个父盒子里面有四个子盒子,每个子盒子写 flex：1； 此时每个子盒子各占四分之一

html结构如下:

<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <div>4</div>
</div>

CSS样式如下:

.father {
    display: flex;
    height: 300px;
    background-color: pink;
}

.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

5.总结

在flex布局中,没有块级元素，行内元素和行内块元素之分;并且不存在脱标的问题,不使用浮动

当然也会存在一定的兼容性问题,如果不需要考虑兼容性问题,可以放心大量用