Flexbox（彈性盒子）

時間 2020-06-22

標籤 flexbox 彈性盒子欄目 Flex 简体版

原文原文鏈接

CSS3屬性：這是一個能夠讓你告別浮動、完美實現垂直水平居中的新特性。css

Flexbox是佈局模塊，而不是一個簡單的屬性，它包含父元素和子元素的屬性。html

屬性介紹：前端

建立Flex容器web

.container{
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    display:-ms-flexbox;
}

Flex-direction（旋轉主軸、容器屬性）：一個主軸（main axis）和一個側軸（cross axis）佈局

row：

主軸與行內軸方向做爲默認的書寫模式。即橫向從左到右排列（左對齊）。

row-reverse：

對齊方式與row相反。

column：

主軸與塊軸方向做爲默認的書寫模式。即縱向從上往下排列（頂對齊）。

column-reverse：

對齊方式與column相反。

#container {
  display: flex;
  flex-direction: column;
}

justify-content（容器屬性）:設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。flex

flex-start：
　　彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。
flex-end：
　　彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。
center：
　　彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（若是剩餘空間是負數，則保持兩端相等長度的溢出）。
space-between：
　　彈性盒子元素會平均地分佈在行裏。若是最左邊的剩餘空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它狀況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等。
space-around：
　　彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半。若是最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它狀況下，伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其餘空白空間的一半。flexbox

align-self（子項屬性）:spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS:flex</title>
    <style type="text/css">
        /*float、clear和vertical-align 屬性將失效。*/
        .flex-content{
            display: flex;
            display: -webkit-flex;
            border:1px solid #c0c0c0;
            width: 400px;
            height:400px;
            margin:auto;
        }
        .flex-box{
            width:100px;
            height:100px;
            background:black;
            margin:10px;
        }

        .flex-self{
            align-self:baseline;
        }
    </style>
</head>
<body>
<div class="flex-content">
    <div class="flex-box flex-self">1</div>
    <div class="flex-box">2</div>
    <div class="flex-box">3</div>
    <div class="flex-box">4</div>
</div>
</body>
</html>

flex-grow（子項屬性）:用數值來定義擴展比率。不容許負值code

<ul class="flex"> 
    <li>a</li> 
    <li>b</li>
     <li>c</li> 
</ul> 
<style>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li:nth-child(1){width:200px;} 
.flex li:nth-child(2){flex-grow:1;width:50px;} 
.flex li:nth-child(3){flex-grow:3;width:50px;}
</style>

flex-basis（子項屬性）: (<length> | <percentage> | auto | content)設置或檢索彈性盒伸縮基準值。htm

length:用長度值來定義寬度。不容許負值

percentage:用百分比來定義寬度。不容許負值

content：基於內容自動計算寬度

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>flex-basis_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
    display:-webkit-flex;
    display:flex;
    width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
    -webkit-flex-basis:600px;
    flex-basis:600px;
}
</style>
</head>
<body>
<h1>flex-basis示例：</h1>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。