flex属性的学习
1.需要记住的属性和值。
-----------------------
--------------------------------------
方向横和纵
flex-direction: row | row-reverse | column | column-reverse;
-----------------------
--------------------------------------
超过怎么办。
flex-wrap: nowrap | wrap | wrap-reverse;
-----------------------
--------------------------------------
以上两个的简写。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow
flex-direction
flex-wrap
row nowrap
-----------------------
--------------------------------------
justify-content属性定义了项目在主轴上的对齐方式。左对齐，右对齐，中间，两端对齐，空间-环绕。
justify-content
justify-content: flex-start | flex-end | center | space-between | space-around;
-----------------------
--------------------------------------
align-items属性定义项目在交叉轴上如何对齐。
align-items
align-items: flex-start | flex-end | center | baseline | stretch;
-----------------------
--------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-----------------------
-------------------------------------
2. CSS3 display：flex和display：box有什么区别
box 是旧属性，已经被flex代替。
flex和box都是伸缩盒，具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿，所以一些属性可能随时被修改。
3.两边都是150px，中间的线的宽度自适应。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div class="a50"></div> <div id="children"> </div> <div class="a50"></div> </div> <style> #app{ display: flex; display: -webkit-flex; display: -ms-flexbox; } #children{ flex:1; border: 1px solid black; } .a50{ flex: 0 0 150px; border: 1px solid red; } </style></body></html> |
4.
5.
6.
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步