flex弹性盒子

最新推荐文章于 2022-04-12 14:51:12 发布

dianovo7

最新推荐文章于 2022-04-12 14:51:12 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/dianovo7/article/details/111479227

版权

本文详细介绍了Flex弹性盒子布局，包括如何声明定义、主轴与侧轴的概念、弹性元素的属性如flex-grow, flex-shrink和flex-basis，以及如何实现垂直居中等关键知识点。" 105623315,8761856,计算机运行原理与网络基础概览,"['计算机基础', '数据结构', 'OOP', '网络基础', 'TCP/IP协议']

摘要由CSDN通过智能技术生成

flex弹性盒子

垂直居中

    传统：绝对定位
    flex：flexible box 弹性盒子。可以轻松控制元素的排列，对齐和顺序。

声明定义：

使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。
【注】一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽，默认为100%；
inline-flex：如果没有设置宽，，默认为所有子元素的宽的和

flex-direction

    用于设置盒子中的子元素的排列方向。 
        row 从左到右水平排列子元素（默认值）
        column 从上往下垂直排列子元素
        row-reverse 从右到左排列子元素
        column-reverse 从下往上垂直排列子元素

flex-wrap

    规定flex容器是单行还是多行，是否换行
    nowrap:不换行（默认值）
    wrap：换行
    wrap-reverse 反向换行。

    flex-flow
        是flex-direction与flex-wrap的组合写法。
    flex-flow:flex-direction flex-wrap；