CSS中的display屬性的flex布局

2021-08-30 13:17:53 字數 1514 閱讀 5933

display:flex;

flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。它即可以應用於容器中，也可以應用於行內元素。

基本概念

採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

以下6個屬性設定在容器上：

1 .box
屬性可選值的範圍為row(預設)沿水平主軸由左向右排列、row-reverse沿水平主軸由右向左排列、column沿垂直主軸右上到下和column-reverse。

flex-wrap

1 .box
屬性可選值的範圍為nowrap(預設)不換行、wrap換行（第一行在上方）和wrap-reverse（***~）

flex-flow

1 .box
寫法屬性中，將上述兩種方法的值用||連線即可

justify-content

1 .box
專案在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設定了)

flex-start：在主軸上由左或者上開始排列

flex-end：在主軸上由右或者下開始排列

center：在主軸上居中排列

space-between：在主軸上左右兩端或者上下兩端開始排列

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍

align-items

1 .box
詳情:

以上介紹完了容器中的屬性，下面說一下容器中專案的屬性：

CSS中的display屬性

display中文為顯示的意識，顯而易見它的功能就是為了控制頁面元素顯示方式 display中為我們提供了很多屬性，其中最常見的有 none屬性代表著元素不會被顯示 比如很多 的頂部導航欄都會有二級選單，只有當我們的滑鼠移動或點選時二級選單才會顯示出來。這是就可以使用到display none這個屬...

細說CSS中的display屬性

相信大部分奮戰在前端的，尤其在前端攻城的過程中，有一種越陷越深的感覺，不錯，一如前端深似海，從此妹子是浮雲啊，前端上手容易，深入難啊！下面我就css中的display屬性講下我自己所積累的，與大家共享下，大神勿噴，我只是路過的。css中display屬性在w3c教程上有簡要說明 當然我是覺得講的不夠...

詳解css中的display屬性

首先，所有主流瀏覽器都支援 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的型別。預設值 inline 我們常用的display屬性值有 inline block inline block none 把 display 設定成 none 不會保留元素本該顯示的空間，但...