CSS：布局——伸缩布局flex

1. Flex布局

两个属性
① display : inline-flex 将对象作为弹性伸缩盒展示,用于行内元素
② display : flex 将对象作为弹性伸缩盒展示,用于块级元素

2. 常用属性

flex-direction : 用于指定Flex主轴的方向,继而决定Flex子项在Flex容器中的位置
取值 : row | row-reverse | column | column-reverse
row : 默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴
row-reverse : 与row相反
column : 表示垂直方向从上到下排列,此时垂直方向轴线为主轴
column-reverse : 与column相反
justify-content : 用于指定主轴(水平方向)上Flex子项的对齐方式
取值 : flex-start | flex-end | center | space-between | space-around
flex-start : 默认值,表示与行的起始位置对齐
flex-end : 表示与行的结束位置对齐
center : 表示与行中间对齐
space-between : 表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start
space-around : 表示间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center.
align-items : 用来指定侧轴(垂直方向)上Flex子项的对齐方式
取值 : stretch | flex-start | flex-end | center | baseline
stretch : 默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度.这里需要注意一下,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度
flex-start : 表示与侧轴的开始位置对齐
flex-end : 表示与侧轴的结束位置对齐
center : 表示与侧轴中间对齐
baseline : 表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上,效果等同于flex-start
flex-wrap : 用来指定Flex子项是否换行
取值 : nowrap | wrap | wrap-reverse
nowrap : 默认值,表示不换行,Flex子项可能会溢出
wrap : 表示换行,溢出的Flex子项会被放到下一行
wrap-reverse : 表示反向换行
align-self : 该属性用于单独指定某Flex子项的对齐方式
取值 : auto | flex-start | flex-end | center | baseline | stretch
align-content : 该属性只用于多行的情况下,用于多行的对齐方式
取值 : stretch | flex-start | flex-end | center | space-between | space-around
stretch : 默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度
flex-start : 表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行
flex-end : 表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行
center : 表示各行与侧轴中间对齐
space-between :表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数时,效果等同于flex-start
space-around : 表示各行之间间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数时,效果等同于center

3. 复合属性

复合属性flex,是flex-grow、flex-shrink和flex-basis的简写属性,用于指定Flex子项如何分配空间

flex-grow : 默认值为0,若省略则被默认为1
flex-shrink : 默认值为1,省略时默认为1
flex-basis : 默认值为auto,省略是默认为0%

4. 案例 : 手机端百度界面设计

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>*{margin: 0;padding: 0;list-style: none;}html{font-size: 10px;}body{font-size: 1.6rem;background-color: #e8e8e8;}.bd-layout{width: 100%;height: 100%;/*background-color: red;*/}.bd-header{width: 100%;height: 4rem;background-color: #fff;border-bottom: 0.1rem solid #CCCCCC;/*伸缩布局*/display: flex;/*主轴两端对齐*/justify-content: space-around;align-items: center;position: fixed;left: 0;top: 0;}.bd-header span{/*background-color: skyblue;*/padding: 3px;}.bd-header span.current{color: deepskyblue;}.bd-content{margin-top: 5rem;}.bd-content .cell1{background-color: #fff;padding: 0.5rem;border-bottom: 1px solid #e8e8e8;}.cell1-center{/*伸缩布局*/display: flex;justify-content: space-around;align-items: center;}.cell1-center div{/*background-color: red;*//*height: 6rem;*/flex: 1;padding: 0.5rem;}.cell1-center div img{width: 100%;}.cell2{background-color: #fff;padding: 0.5rem;border-bottom: 1px solid #e8e8e8;display: flex;}.cell2-left{flex: 2;background-color: red;}.cell2-left img{width: 100%;height: 100%;}.cell2-right{flex: 4;/*background-color: green;*/display: flex;flex-direction: column;margin-left: 1rem;}.cell2-right p:first-child{flex: 1;height: 2rem;line-height: 2.5rem;overflow: hidden;/*background-color: red;*/}</style>
</head>
<body><div class="bd-layout"><!--头部--><div class="bd-header"><span class="current">推荐</span><span>热点</span><span>视频</span><span>娱乐</span><span>军事</span></div><!--内容--><div class="bd-content"><div class="cell1"><div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div><div class="cell1-center"><div><img src="imgs/img1.jpg" alt=""></div><div><img src="imgs/img2.jpg" alt=""></div><div><img src="imgs/img3.jpg" alt=""></div></div><div class="cell1-bottom"><span>小谈食刻</span><span>11-21</span></div></div><div class="cell2"><div class="cell2-left"><img src="imgs/img4.jpg" alt=""></div><div class="cell2-right"><p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p><p><span>环球网</span><span>11-26</span></p></div></div><div class="cell1"><div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div><div class="cell1-center"><div><img src="imgs/img1.jpg" alt=""></div><div><img src="imgs/img2.jpg" alt=""></div><div><img src="imgs/img3.jpg" alt=""></div></div><div class="cell1-bottom"><span>小谈食刻</span><span>11-21</span></div></div><div class="cell2"><div class="cell2-left"><img src="imgs/img4.jpg" alt=""></div><div class="cell2-right"><p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p><p><span>环球网</span><span>11-26</span></p></div></div><div class="cell1"><div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div><div class="cell1-center"><div><img src="imgs/img1.jpg" alt=""></div><div><img src="imgs/img2.jpg" alt=""></div><div><img src="imgs/img3.jpg" alt=""></div></div><div class="cell1-bottom"><span>小谈食刻</span><span>11-21</span></div></div><div class="cell2"><div class="cell2-left"><img src="imgs/img4.jpg" alt=""></div><div class="cell2-right"><p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p><p><span>环球网</span><span>11-26</span></p></div></div><div class="cell1"><div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div><div class="cell1-center"><div><img src="imgs/img1.jpg" alt=""></div><div><img src="imgs/img2.jpg" alt=""></div><div><img src="imgs/img3.jpg" alt=""></div></div><div class="cell1-bottom"><span>小谈食刻</span><span>11-21</span></div></div><div class="cell2"><div class="cell2-left"><img src="imgs/img4.jpg" alt=""></div><div class="cell2-right"><p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p><p><span>环球网</span><span>11-26</span></p></div></div></div></div>
</body>
</html>

运行后效果:

CSS：布局——伸缩布局flex相关推荐

CSS3 弹性布局/伸缩布局 flex
CSS3 之弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
学伸缩布局(flex)这一篇文章就够了——伸缩布局的布局思路
什么是伸缩布局伸缩布局又被称为弹性布局,它可以快速实现一些常见的布局,和浮动和定位比起来,他就友好太多了,给子盒子加上宽高,父盒子开启伸缩布局加上一些代码子盒子就可以自己去排列. 如何使用伸缩开启 ...
CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法--flex(弹性布局). flex 为和模型布局提供了极 ...
css线条伸缩_CSS3弹性伸缩布局之box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
弹性布局flex 伸缩布局 flex布局什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
flex伸缩布局盒模型总结
以下内容为大漠大大的书籍<图解css3核心技术与案例实战>观看后的总结. css2.1中定义了四种布局模式,由一个盒与其兄弟.祖先盒的关系决定其尺寸与位置的算法块布局行内布局表格布局 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...