flex-彈性盒

時間 2020-05-15

標籤 flex 彈性欄目 Flex 简体版

原文原文鏈接

開啓flex的方法

<style>
  /* 父級開啓 */
  div {
    display: flex;
  }
  /* 子項 */
  div span {
    width: 150px;
    height: 100px;
    background-color: red;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

flex佈局父級經常使用屬性

屬性	說明
flex-direction	設置主軸方向
justify-content	設置主軸上的子元素排列方式
flex-wrap	設置子元素是否換行
align-content	設置側軸上的子元素的排列方式(多行)
align-items	設置側軸上的子元素排列方式(單行)
flex-flow	複合屬性，至關於同事設置了flex-direction和flex-wrap

flex-direction:	說明
row	默認值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

justify-content:	說明
center	在主軸居中對齊（若是主軸是x軸則水平居中）
space-around	平分剩餘空間
space-between	兩邊貼邊再平分剩餘空間
space-evenly

flex-wrap:	說明
nowrap	默認值不換行
wrap	換行

align-content:	說明
flex-start	默認值在側軸的頭部開始排列
flex-end	在側軸的尾部開始排列
center	在側軸中間顯示
space-around	子項在側軸評分剩餘空間
space-between	子項在側軸先分佈兩邊，再平分剩餘空間
stretch	設置子項元素高度平分父級元素高度

align-items:	說明
flex-start	默認值從上到啊
flex-end	從下到上
center	居中(垂直居中)
stretch	拉伸

flex佈局子項常見屬性

屬性	說明
flex	子項佔據的份數
align-self	控制子項本身在側軸的排列方式
order	定義子項的排列順序(先後順序)

1. flex 彈性盒子
2. flex-box 彈性盒模型
3. 彈性盒模型(flex)
4. 彈性盒模型（flex-box）
5. 彈性盒模型 flex box
6. css3-彈性盒模型（flex）
7. flex彈性盒模型
8. 認識彈性盒子flex
9. 彈性盒(flex佈局)
10. CSS 彈性盒子（flex）
更多相關文章...
• jQuery Mobile 彈窗 - jQuery Mobile 教程
• WebSecurity 屬性 - CurrentUserName - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

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