使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧
以下称:弹性子元素: 子元素, 弹性容器: 容器
弹性盒子的属性
1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示
2. 弹性元素默认显示在弹性容器的同一行内(既:弹性盒子默认包含一行)
3. flex-direction: 规定子元素在容器内的排列顺序:
row: 水平: 左对齐
row-reverse: 水平 逆序右对齐
column: 垂直: 上对齐
column-reverse: 垂直 逆序下对齐
4. justify-content: 规定子元素在容器内水平方向上的对齐方式
flex-start: 默认 左对齐
flex-end: 右对齐
center: 居中对齐
space-between: 均匀分布对齐 贴合容器!!!
space-around: 均匀分布对齐 均匀距离容器!!!
5. align-items规定子元素在容器内纵轴上的对齐方式
flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center: 弹性盒子元素在该行的侧轴(纵轴)上居中对齐
baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,
该值将参与基线对齐
stretch: 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,
但同时会遵照'min/max-width/height'属性的限制
6. flex-wrap: 规定子元素在容器内换行方式 (wrap: 外套,包装的意思。nowrap不要外套,就一行,wrap: 要外套, 允许换行,包着子元素)
nowrap: 默认 不换行
wrap: 换行
wrap-reverse: 换行 逆序
7. align-content: 规定子元素在容器中垂直方向上的对齐方式, 和justify-content相反
(前提: 容器内允许换行,既存在多行子元素)
flex-start: 默认 上对齐
flex-end: 下对齐
center: 居中对齐
space-between: 均匀分布对齐 贴合容器上下!!!
space-around: 均匀分布对齐 均匀距离容器左右!!!
默认特性:
1. 弹性元素间默认没有间隙
2. 弹性容器默认不改变弹性项目宽度
3. 弹性布局默认左对齐
4. flex-grow: 1, 则该项目默认拉伸占据该行剩余宽度。 默认值为0, 不拉伸。
5. 弹性布局默认改变项目的高度, 如果没有指定项目的高度, 则默认充满项目高。(若弹性b元素改变了容器宽度, 则弹性a元素也将被拉伸)
6. align-self指定了单个弹性元素在纵轴上的对其方式, 如果一个个设置该属性太麻烦, 则可以设置容器的align-items, 所有单个元素的align-self将会继承这个值。
弹性子元素属性
1. order: 规定子元素在容器中的排列顺序, 用数值表示,越小越靠前, 可谓负数
2. margin: 自动获取盒子内水平和垂直方向的剩余空间,并设置最完美的距离。
注: 设置margin:auto可是使子元素在容器内完美居中, 解决了多年来的元素居中问题
3. align-self设置元素自身在容器内纵轴方向上的对齐方式
flex-start: 默认 上对齐
flex-end: 下对齐
center: 居中对齐
basline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐
strench: 拉伸自身和容器高度相同
4. flex: 规定子元素在容器内如何占据空间,类似于bootstrap的栅格布局,相当于百分比的意思
数值: 例如有三个子元素 flex值分别为2 1 1 , 则相当于witdh: 50% 25% 25%
注意: 请使用默认值: auto: 自动拉伸; none:不拉伸
demo: 做一个类似淘宝移动端商品列表项(自如网面试题题):
需求:
HTML:
<div class="container"> <div class="left"> <div class="lcontent"> content </div> </div> <div class="right"> <p class="title"> titltitletitletitletitlee titltitletitletitletitlee titltitletitletitletitlee </p> <p class="content"> content </p> <p class="time"> 2018-08-21 10:30 </p> </div> </div>
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .container { display: flex; display: -webkit-flex; border: 1px solid #ddd; width: 100%; height: auto; flex-direction: row; justify-content: space-between; -webkit-justify-content: space-around; align-content: space-around; -webkit-align-content: space-around; } .container .left, .container .right{ // flex: 1; width: 40%; margin: 10; } .container .left { display: flex; border: 1px solid #eee; background-color: #eee; border-radius: 15px; } .container .left .lcontent { margin: auto; } .container .right .title { font-weight: bolder; } .container .right .content { color: #ddd; font-size: 14px; } .container .right .time { font-size: 12px; } |
效果:
* flex-basis和flex-grow的demo
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程