【css】彈性盒模型

時間 2019-11-13

標籤 css 彈性模型欄目 CSS 简体版

原文原文鏈接

彈性盒模型flexBox佈局

彈性盒模型是c3的一種新的佈局模式flex

它是指一種當頁面須要適應不一樣屏幕大小以及設備類型時，確保元素有恰當行爲的佈局方式。spa

引入彈性盒模型佈局的目的是提供一種更有效的方法來對一個容器中的子元素進行排列、對齊和分配空白空間。code

兼容性orm

IE11 blog

彈性盒模型內容it

彈性盒模型由彈性容器（flex container）和彈性子元素（flex item）組成io

將父容器設置display:flex轉換爲彈性容器form

介紹幾個經常使用方法：class

flex-direction:

row:橫向從左到右排列，默認

row-reverse:橫向從右到左排列（最後一項在最前面）

column:縱向排列

column-reverse:反轉縱向排列（最後一項排在最上面）

justify-content:

　　flex-start:起始點對齊（左對齊）

　　flex-end:終止點對齊（右對齊）

　　center:居中對齊

　　space-around:四周環繞

　　space-between:兩端對齊

讓盒子水平垂直居中的方法：

1 使用彈性盒模型 display:flex + justify-content:center + align-items:center

    <style>
       .box{
           width: 400px;
           height: 300px;
           display: flex; 讓盒子變成彈性盒模型
           justify-content: center; 居中
           align-items: center;  居中
           background-color: pink;
       }
        
       .child{
           width: 150px;
           height: 150px;
           background-color: skyblue;
       } 
        
    </style>
</head>
<body>

<div class="box">
    <div class="child"></div>
</div>

2 使用position:absolute + transform:translate

     .box{
           width: 400px;
           height: 300px;
           position: relative;
           background-color: pink;
       }
        
       .child{
           width: 150px;
           height: 150px;
           background-color: skyblue;
           position: absolute;
           top: 50%;
           left: 50%;
           transform:translate(-50%,-50%)
       } 
        
    </style>
</head>
<body>

<div class="box">
    <div class="child"></div>
</div>

相關標籤/搜索

每日一句

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