|-彈性盒子
|--定義彈性盒子? display：flex
|--定義子元素的排列方式? flex-direction
|--定義子元素的換行方式? flex-wrap
|--定義子元素的對齊方式
|----橫向對齊? justify-content
|----縱向對齊? align-intems

.parent{width: 800px;height: 400px;border: 1px solid red;display: flex;/*定義父元素為彈性盒子*/flex-direction: row;/*設定子元素的排列方式*/flex-wrap: wrap;/*設定子元素的換行方式*/justify-content: space-between;/*設定子元素的橫向對齊方式*/align-items: auto;/*設定子元素的縱向對齊方式*/ } .children{width: 170px;height: 180px;border: 1px solid blue;flex:1;align-self: flex-start; } .children1{border: 1px solid black;flex: 3; }

?

|-媒體查詢
|--@media screen and (max-width:最大寬度) and (min-width:最小寬度)

轉載于:https://www.cnblogs.com/zhangbaozhong/p/9008059.html

總結

以上是生活随笔為你收集整理的0507css3基础：弹性盒子、媒体查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。