IT源码网

css弹性布局讲解

shasha 2021年02月16日 编程语言 154 0

1.弹性布局是什么

在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活。

2.弹性布局的格式

包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的

3.父元素的属性

要开启弹性布局,父元素要先加上一个flex属性

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

当然,行内元素也可以用弹性布局,同样父元素要加上flex属性 

display: inline-flex;

另外父元素还可以加上下面6个属性

flex-direction 
flex-wrap 
flex-flow 
justify-content 
align-items 
align-content

用的比较多的就2个属性,子元素的水平和垂直对齐

//子元素水平排列
.box
{ justify-content: flex-start | flex-end | center | space-between | space-around;
}
//子元素垂直排列
.box { 
  align-items: flex-start | flex-end | center | baseline | stretch; }

 

4.子元素属性

用的最多的就是flex属性(包含了flex-grow, flex-shrink 和 flex-basis)

flex-grow表示放大比例,默认为0,flex-shrink缩写比例,默认为1。flex-basis表示子元素宽度,默认auto

.item { 
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

 

参考资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

web加密的基本概念讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。