从移动端webAPP谈起:flex弹性布局

本文详细介绍了Flex布局的概念及其在网页设计中的应用。通过对比传统布局方式,讲解了Flex布局的优势及其实现方法,包括如何设置父元素和子元素的布局属性。

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

之前的业务以移动端web app为主,页面结构基本上差不多,大概的思路是,横向流动布局,自动铺满宽度,纵向不做限定,由页面元素自上向下堆砌,然后在容器设置滚动就好了。其中,横向布局我花了点时间研究。

例如一个很常见顶栏组件,分左(按钮)中(标题)右(按钮)三个部分:




在不知道flex布局之前,我的方法是:中间铺满父元素,左右按钮做绝对定位,这样能够保持两边按钮组的定位,中间内容铺满,应付这种布局虽说不够严谨,但也能接受。

但是在处理下面这种表单的时候,这个布局就没用了:




首先,这个组件有着明确的边界区分,不能再像上面一样模糊边界,另外,左右两个元素宽度是不确定的,也就是说左边是“刚性的”,宽度由内容决定,而右边是“弹性的”,占据除了左边元素宽度以外的父元素的宽度,整个过程需要是自动的,无需手动改写结构和样式。这样的话,传统的定位和百分比就很难做到,为了适应这种布局,W3C推出了新的CSS属性:flex。

flex布局分两个部分,父元素设定子元素的布局规则,子元素决定自己的布局规则:


父元素:

display : flex//声明该父元素为弹性布局
flex-direction : row | row-reverse | column | column-reverse//控制子元素排列方向:从左到右(默认),从右到左,从上到下,从下到上
flex-wrap : nowrap | wrap | wrap-reverse//控制子元素换行情况:不换行(默认),换行(下一行在下方),换行(下一行在上方)
flex-flow : flex-direction||flex-wrap//direction和wrap的简写属性
justify-content : flex-start | flex-end | center | space-between | space-around//控制子元素的对齐方式(以从左到右为例):左对齐(默认),右对齐,居中,两端对齐,项目间间隔相等
align-items : flex-start | flex-end | center | baseline | stretch//控制交叉方向上(水平->垂直)的对齐方式,其中stretch为默认值,子元素将占满交叉方向的全部高度/宽度
align-content : flex-start | flex-end | center | space-between | space-around | stretch//当出现换行的时候,这个属性控制多行之间的对齐方式(与justify-content相似)


子元素:

order : number//控制排位顺序,数字越小越靠前(可以是负数)
flex-grow : number//控制放大比例
flex-shrink : number//控制缩小比例,与shrink类似
flex-basis : length|auto//控制元素弹性处理前的原大小,可设置为CSS的length属性,默认为auto
flex : flex-grow || flex-shrink || flex-basis//简写属性,默认为0 1 auto
align-self : auto | flex-start | flex-end | center | baseline | stretch//这个属性可以使当前子元素脱离父元素的对齐规则,单独设定自己的对齐规则


举个例子来说:

.wrap{display:flex;display:-webkit-flex;}
.div1{flex-grow:1;}
.div2{flex-grow:1;}
.div3{flex-grow:2;}
.div4{width:100px;}

首先父元素wrap设置display:flex,使其子元素进行弹性布局,其中子元素变为类似inline-block的状态,块级元素的默认with:100%会失效,float,clear,vertical-align也会失效。在上面这个水平(默认)布局当中,存在三个带grow属性的div,和一个固定宽度的div,这种情况,浏览器会先算出父元素宽度,然后减去固定宽度100px,再根据grow比例去分配剩下的宽度,总grow的和是1+1+2=4,则div1的宽度占据剩余宽度的1/4,div3占据1/2,如此类推(当grow属性设为0的时候,元素的宽度不会发生改变,当作固定宽度处理)。如果子元素中只有一个元素拥有grow属性且不为0,则该元素将占据剩余的所有宽度,说到这里,之前说到的表单布局问题就迎刃而解了:

.wrap{display:flex;display:-webkit-flex;}
.left{width:auto;}
.right{flex-grow:1;}
这个时候,左边的标题宽度将会根据标题的实际内容而改变,而右边的内容将会占据除了标题以外的所有宽度,实现弹性布局。

同样flex布局也可以用来优化上面的顶栏布局。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值