提示: 当期内容不充实, 修改后再来看吧
以下称:弹性子元素: 子元素, 弹性容器: 容器
弹性盒子的属性
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">
-- :
</p>
</div>
</div>
CSS:
.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