Flex布局擺脫float帶來的布局問題


  完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

  使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素,且父元素未設置高度和寬度的時候。那么它的高度就會塌縮為零。那我們就不能

做高度根據內容自動調整的布局,但是利用flex布局可以實現,不需要設置父元素的寬度和高度,讓父元素根據子元素自動調整大小。

  Flex是Flexible Box的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局:.div{dispaly:flex}.采用Flex布局的元素,稱為Flex容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員。這里我主要說一下容器的一個屬性flex-direction.他有4個取值分別為:row、row-reverse、column、column-reverse.

  • row(默認值):主軸為水平方向,起點在左端。
  • row-reverse:主軸為水平方向,起點在右端。
  • column:主軸為垂直方向,起點在上沿。
  • column-reverse:主軸為垂直方向,起點在下沿。

代碼如下:

可以通過設置flex-direction屬性得到不同的效果。下面代碼只是設置{flex-direction:row}。

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1{
display: flex;
flex-direction: row;
border:1px solid red;
width:300px;
}
.div1 div{
border:1px solid black;
margin:10px 10px;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="div1">
<div>a
</div>
<div>b
</div>
<div>c
</div>
</div>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM