當前位置：
首頁 >
学习关于display ：flex 布局问题！
發布時間：2023/12/2
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
学习关于display ：flex 布局问题！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 很多人不明白這個display:flex是到底是什么東西，如何使用的 ?。
1.什么是display：flex呢？
答：flex是 flexible ?box的縮寫，意為彈性布局 ；這個東西的引入，為盒模型提供了最大的靈活性！可以相應式的實現各種頁面的布局。
?
基本概念
采用flex布局的元素，稱為flex容器(flex ? container)，簡稱容器。 ? ?在這個容器中默認存在兩個軸：水平方向的主軸（main axis）和 垂直方向上的交叉軸（cross axis）。
圖： （摘自：他人博客）
以下6個屬性設置在容器上：
-
- ?flex-direction ? 容器項目的排列方向（默認是橫向排列）
- flex-wrap ? ? ?容器內項目的換行方式
- flex-flow ? ? ?flex-direction 和 flex-wrap 屬性的復合屬性。
- justify-content ? 項目在主軸上對齊樣式
- align-item 項目在交叉軸上如何對齊
- align-content ? 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
?
?注意： ? ?如果元素不是彈性盒對象的元素，則flex-flow 屬性是不起作用的；
?
?
屬性值
用法
?
<!DOCTYPE html> <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><style>.father {width: 500px;height: 100px;background-color: red;display: flex;flex-flow:row;}.box1 {flex: 3;background: blue;}.box2{flex: 2;background: pink;}</style> </head><body><div class="father"><div class="box1"></div><div class="box2"></div></div> </body></html>?
?
?
?以上僅是我個人初步學習！后期學習在進行更新! ?~~~~~~~~~~~
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hbbbcab&title=學習關于display ：flex 布局問題！
總結
以上是生活随笔為你收集整理的学习关于display ：flex 布局问题！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： less学习三---父选择器
- 下一篇： 什么是css sprites，如何使用？