在display:flex中,
1.flex: 1;text-align: right;代表「專案」居右,
原因是這樣會讓它占用主軸上剩餘的空間,配合text-align: right可以實現文字靠在最右側的效果
2.margin-right:auto 代表 右邊最大化,此時會移動到div的左側。
養貓俱樂部 span
>
style
="color
: #a7a7a7;
flex
: 1;
text-align
: right;
padding-top
: 0.05rem
">
成員 1238span
>
div>
>
style
="color
: #a7a7a7;
">
這是介紹介紹介紹介紹介紹介紹span
>
div>
div>
>
class
="card-tag-btn"
style
="float
: right;
">
type
="right"
size
="10px"
color
="#999"
>
nut-icon
>
div>
div>
div>
section
>
template
>
display flex彈性布局
display flex 火狐支援無字首,谷歌和opera支援 webkit 字首寫法,比較適合移動端開發使用 例子 1 23header header a 注釋 display屬性設定flew,所有子元素都會自動變成伸縮專案,預設是橫向排列,若flew flow值設為column,變為縱向排列,f...
display flex 布局教程
布局的傳統解決方案,基於盒狀模型,依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現。flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。css view...
display flex 布局教程
布局的傳統解決方案,基於盒狀模型,依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現。flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。css view...