Flex 布局

本文详细介绍了CSS的Flex布局,包括其基本概念、主要属性如flex-direction、flex-wrap、justify-content等,以及它们在创建灵活、响应式页面布局中的应用。通过Flex布局,开发者可以更方便地实现垂直居中、多行排列等复杂布局,且已得到所有主流浏览器的支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术: CSS

作者:公孙离

撰写时间:2021/6/8

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       布局的传统解决方案,基于盒状模型,依赖 display 属性 +position属性+float属性。

它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了

一种新的方案----Flex 布局,可以简便、完整、响应式的实现各种页面布局。目前。它已

经得到了所有浏览器的支持,这意味着,现在就能黑安全的使用这项功能。

一、Flex布局是什么?

       Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

       .box{

              display: flex;

           }

行内元素也可以使用 Flex 布局:

       .box{

              display: inline-flex;

           }

Webkit 内核的浏览器,必须加上-webkit 前缀:

       .box{

              display: -webkit-flex; /*Safan*/

              display: flex;

           }

            浮动:float       清除浮动:clear         垂直对齐:vertical-align

*设置了 Flex 布局之后,子元素的 float、clear 和 vertical-align 失效;

二、基本概念

       采用 Flex 布局的元素,称为 Flex 容器 (flex container),简称“容器”。它的所有子元素

自动成为容器成员,称为 Flex 项目 (flex item),简称“项目”。

       容器默认存在两根轴:水平主轴(main axis)和 垂直的交叉轴。主轴的开始位置(与边框的交叉点)

叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫 cross start,结束位置叫 cross end。

      

 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴的空间叫做 cross size。

三、容器的属性:

以下6个属性设置在容器上:

       flex-diretion:主轴的方向 (即项目的排列方向);

       flex-wrap:如果项目在一条轴线排不下,如何换行;

       flex-flow:flex-diretion 和 flex-wrap 的简写;

       justify-content:项目在主轴上的对齐方式;

       align-itens:项目在交叉轴上的对齐;

       align-content:多根轴线的对齐方式。

flex-diretion 属性:

       Flex-ditrtion 属性决定主轴的方向(即项目的排列方向)。

       该属性可能取值以及对应的效果如下:

       flex-diretion: row;( 默认,主轴为水平方向,起点在左端。)

起点左端:   1    2    3

       flex-diretion: row-reverse;( 主轴为水平方向,起点在右端。)

起点右端:   3    2    1

       flex-direction: column; ( 主轴为垂直方向,起点在上沿;)

起点上沿:         1

                           2

                           3

       flex-direction: colum-reverse; ( 主轴为垂直方向,起点在下沿;)

起点下沿:         3

                           2

                           1

flex-wrap 属性:

       默认情况下,项目都排在一条线 (又称“轴线”)上。flex-wrap 属性定义,如果一条轴线排不下,

如何换行。

       该属性可能取值以及对应的效果如下:

       flex-wrap: nowrap; ( 默认,不换行 )

        1  2  3  4  5  6  7  8  9  10  11  12  

       flex-wrap: warp; ( 换行,第一行在上方 )     

        1  2  3  4  5  6  7  8  9  

       10  11  12

        flex-wrap: wrap-reverse; ( 换行,第一行在下方 )

       10  11  12

        1  2  3  4  5  6  7  8  9  

flex-flows 属性:

        flex-flow 是 flex-direction 和 flex-wrap 属性的简写,默认值是 row nowrap。

justify-content 属性:

        Justify-content 属性定义了项目在主轴上的对齐方式。

该属性可能取值以及对应的效果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值