flex 布局筆記

2022-03-25 06:53:09 字數 348 閱讀 7066

1,今天遇到乙個問題,就是當元素布局設定為了flex後,裡面的內容只有文字,但是對text-align 屬性設定無效,仔細想了下,是因為把display 設定為了flex後,flex將裡面的文字也認為是乙個子元素(其實就是子元素。。只不過是文字節點而已),子元素布局可以通過align-items 設定y軸,justify-content 設定x軸的對齊方式(假如flex-flow 設定為了row wrap後)。

那麼在這種情況下,元素設定為flex後,文字節點是不能通過設定text-align居中的。

如果要設定居中的話,可以通過justify-content:center 來設定,如果硬要通過text-align設定,那麼要將flex去掉才行。

flex布局筆記

flex基本術語 display 定義乙個父容器,設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...

flex布局筆記

父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...

Flex布局筆記

採用 flex 布局的元素,稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性,來控制子盒子的位置和排列方式 flex direction屬性值 屬...