盒子三)"/>
flex布局(弹性盒子三)
在之前的文章里说到了弹性盒子的部分属性,接下来接着说弹性盒子的其余属性
目录
弹性盒子的属性及其属性值
1.order 顺序指定:用css指定顺序,不用html排序
2.flex-grow 子项目延伸比率
3.flex-shrink 子项目的收缩比率 和flex-grow正好相反
4.flex-basis 子项目的基本宽度
5.flex flex-grow、flex-shrink和flex-basis一起指定
6.align-self 子元素垂直对齐 这是给单个的子元素盒子设置样式
弹性盒子的属性及其属性值
1.order 顺序指定:用css指定顺序,不用html排序
设置内容区的样式:.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;order: 3;}
内容区:<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示:html里给数字1盒子 排序在最前面第一位,但是css里给数字1盒子排序在最后面一位,最后数字1盒子排在了最后面一位,说明css也可以给子元素盒子进行排序
2.flex-grow 子项目延伸比率
设置内容区的样式:.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;flex-grow: 1;}
内容区:<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示:有一个元素设置延伸宽度至挤满父元素的宽度,两个元素设置就是共同平分共同延伸至挤满父元素的宽度
3.flex-shrink 子项目的收缩比率 和flex-grow正好相反
例:.item1{flex-shrink:0;}
4.flex-basis 子项目的基本宽度
例:.item1{flex-basis:200px;}
5.flex flex-grow、flex-shrink和flex-basis一起指定
例:.item1{flex:0 1 30%;}
6.align-self 子元素垂直对齐 这是给单个的子元素盒子设置样式
a auto 默认值
意思是指定的子元素盒子还是停留在当前位置,没有变化
b flex-shart 靠上
意思是指定的子元素盒子靠上,因为子元素盒子原始位置就是靠上,所以也相当于是默认值
c flex-end 靠下
设置内容区的样式:.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;align-self: flex-end;}
内容区:<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示:设置选定的子元素 flex-end后,盒子靠在了父元素盒子的最下面
d center 居中
意思是设置选定的子元素center 后,盒子靠在了父元素盒子的最中间
e stretch 默认值
和auto一样,意思是指定的子元素盒子还是停留在当前位置,没有变化
f baseline 也是靠上的意思,和flex-start一样相当于是默认值
更多推荐
flex布局(弹性盒子三)
发布评论