display的flex屬性使用詳解

2021-08-20 03:24:03 字數 648 閱讀 9798

flex的相容性在pc端還算闊以,但是在移動端,那就呵呵了。今天我們只是學習學習,忽略一些不重要的東西。

首先flex的使用需要有乙個父容器,父容器中有幾個items.

父容器:container

屬性: 

display

:flex;/*flex塊級,inline-flex:行內快*/

justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右;space-between:兩邊的向兩邊靠,中間等分;space-around:完美的平均分配*/

align-items:stretch;/*center:垂直居中、flex-start:至頂、flex-end:至底、space-between、space-around*/  

flex-direction: row;/*column從上向下的排列,column-reverse、row:從左到右,row-reverse:從右向左*/

flex-wrap:wrap;/*wrap多行顯示(父容器不夠顯示的時候,從上到下)、nowrap(當容器不夠寬的時候,子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/

/*flex-flow是flex-direction、flex-wrap的縮寫*/

display屬性的Flex布局的學習

採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...

小程式display的flex容器屬性

flex direction 決定元素排列方向 flex direction row column 預設為row,方向為水平,元素的排列方向即為主軸 另外垂直的方向為交叉軸 flex wrap決定元素如何換行 排列不下時 flex wrap wrap 預設排列不下時換行 flex wrap nowr...

CSS中的display屬性的flex布局

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