生活随笔
收集整理的這篇文章主要介紹了
5.7 弹性盒子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
彈性盒子
定義彈性盒子 display：flex
定義子元素排列方式 flex-diection
定義子元素換行方式 flxe-wrap
定義子元素對齊方式
橫向對齊 justify-content
縱向對齊 align-items
?
媒體查詢??? @media screen and (max-width:最大寬度)and （min-width：最小寬度）
line-height與vertical-align
line-height 主要作為調節文本的垂直對齊方式，通過設置行高的大小
vertical-align 主要作為調節行內元素（span/img）的垂直對齊方式 top bottom middle text-top text-bottom
!DOCTYPE html>
<html><head><meta charset=
"UTF-8"><title></title><style type=
"text/css">
#parent{width:800px;height: 400px;border:1px solid black;/*定義父元素為彈性盒子*/display:flex;/*規定子元素的排列方式*/flex-direction: row-
reverse;/*規定換行方式*/flex-
wrap: nowrap;/*子元素在父元素的橫向對齊方式*/justify-content: space-
between;/*子元素在父元素的縱向對齊方式*/align-
items:stretch ;}.children{width :170px;height: 180px;border: 1px solid red;float:left ;flex: 1;align-self: flex-
start;}.children1{border: 1px solid red;flex:3;order: 0;}</style></head><body><div id=
"parent"><div
class=
"children">
1</div><div
class=
"children">
2</div><div
class=
"children">
3</div><div
class=
"children">
4</div><div
class=
"children">
5</div><div
class=
"children">
6</div><div
class=
"children1">
7</div><div
class=
"children">
8</div></div></body>
</html>
?
轉載于:https://www.cnblogs.com/sunhao1987/p/9004054.html
總結
以上是生活随笔為你收集整理的5.7 弹性盒子的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
