Flex

本文介绍了Flex布局的基本概念、容器属性及项目属性。Flex布局能够简化并完成响应式的网页设计,支持简便的对齐方式和多轴对齐。文章详细解释了如flex-direction、flex-wrap、justify-content等属性的作用。

Flex:Flexible Box 江湖人称“弹性布局”,对于网页布局,Flex以其简便、完整、响应式获得所有浏览器的信赖。

一、基本概念

1.任意一个容器都可以指定为Flex布局:display: flex;

2.行内元素:display: inline-flex;

3.Webkit内核的浏览器: display: -webkit-flex; /* Safari */   display: flex;

4.设置为该布局后,子元素的float,clear和vertical-align属性将失效


 

上图就是一个大概的描述

二、容器属性

一共有6个属性可以设置在容器上:

1)flex-direction

     .row(默认值)     主轴为水平方向,起点在左端

     .row-reverse          主轴为水平方向,起点在右端

     .column                 主轴为垂直方向,起点在上沿

     .column-reverse    主轴为垂直方向,起点在下沿

2)flex-wrap

     .nowrap(默认值)不换行

     .wrap                      换行,第一行在上方

     .wrap-reverse         换行,第一行在下方

3)flex-flow   

     .row nowrap(默认值)

4)justify-content   定义了项目在主轴上的对齐方式

     .flex-start(默认值)左对齐

     .flex-end      右对齐

     .center       居中

     .space-between       两端对齐,项目之间的间隔都相等

     .space-around       每个项目两侧的间隔相等

5)align-items   定义项目在交叉轴上如何对齐

     .flex-start                 交叉轴的起点对齐

     .flex-end                  交叉轴的终点对齐

     .center                     交叉轴的终点对齐

     .baseline                  项目的第一行文字的基线对齐

     .stretch                     如果项目未设置高度或者设置为auto,将占满容器的高度

6)align-content定义了多根轴线的对齐方式,若只有一根,则该属性不起作用

     .flex-start                 与交叉轴的起点对齐

     .flex-end                  与交叉轴的终点对齐

     .center                     与交叉轴的中点对齐

     .space-between      与交叉轴两端对齐,轴线之间的间隔平均分布

     .space-around         每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍

     .stretch                    轴线占满整个交叉轴

三、项目的属性(容器中的个体)

order:定义项目的排列顺序,数值越小,排列越靠前,默认值为0

flex-grow:定义项目的放大比例,默认为0

flex-shrink:定义项目的缩小比例,默认值为1

flex :flex-grow, flex-shrink 和 flex-basis的简写,默认值0 1 auto,后两个属性可选

align-self:允许单个项目与其他项目不一样的对齐方式

       .auto

       .flex-start

       .flex-end

       .center

       .baseline

       .stretch

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值