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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251778.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251778.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251778.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！