flexbox 的相關屬性的運用

若是用 js 動態的新增 html 元素到有 flexbox 屬性的元素上，那麼渲染的時候 可能會有問題。

css **如下:

.display-flex 

/*裡面的直接子元素相對於外層容器 水平居中,
就可以不用table 讓未知寬度的元素水平居中了
*/.display-flex.justify-content-center 
/*裡面的直接子元素相對於外層容器 垂直居中
*/.display-flex.align-items-center 
/*設定column 為豎向排列, 預設屬性是row 橫向排列 
*/.display-flex.flex-direction-column 
/*讓子元素都有相同的長度
*/.display-flex .flex1.div-box.div1

例子1: 

例子2:

例子3:

例子4:

注意這個時候不要加 flex1, 否則居中看上去就不起作用了, 因為它們兩個各佔一半的寬度。

例子5:

<

div 
class
='div-box 
display-flex align-items-center'
>
<
div 
class
='div1'
>aaaa
div>
<
div 
class
='div2'
>bbbb
div>
div>

例子7:

例子8:

附幾張相容性屬性的截圖:

vertical align屬性的運用及注意事項

2.基線是什麼 三 邊界相關 text top和text bottom 從字面意思可以看出vertical align是針對其垂直方向的位置調整，和text align屬性對應使用。乙個控制縱向的位置，乙個控制橫向的位置。但需要注意的是vertical align是用來控制行內元素的位置屬性 ver...

router link的相關屬性

指定跳轉的路由 home home router link 不想router link渲染成 a 標籤？很簡單，只需要給新增乙個屬性tag即可 home tag button home router link 渲染成button about tag li about router link 渲染成l...

布局相關的屬性

1.position 定位方式 1.正常定位 relative 2.根據父元素進行定位 absolute 3.根據瀏覽器視窗進行定位 fixed 4.沒有定位 static 5.繼承inherit 2.定位 left 左 right 右 top 上 bottom 下 離頁面頂點的距離 3.z ind...