外包网站建设价格,专业网站设计力荐亿企邦,宁夏网站建设电话,营销型网站代理CSS伸缩盒模型
伸缩盒模型是CSS中的一种布局手段#xff0c;可以使元素具有弹性#xff0c;让元素可以跟随页面大小的改变而改变。
1. 伸缩容器
给元素设置display:flex 或 display:inline-flex #xff0c;就是伸缩容器。
2. 主轴与侧轴
主轴#xff1a; 伸缩项目沿着…CSS伸缩盒模型
伸缩盒模型是CSS中的一种布局手段可以使元素具有弹性让元素可以跟随页面大小的改变而改变。
1. 伸缩容器
给元素设置display:flex 或 display:inline-flex 就是伸缩容器。
2. 主轴与侧轴
主轴 伸缩项目沿着主轴排列主轴默认是水平的默认方向是从左到右。侧轴 与主轴垂直的就是侧轴侧轴默认是垂直的默认方向是从上到下。
主轴的属性
属性名作用flex-direction主轴方向row 主轴方向水平从左到右默认row-reverse 主轴方向水平从右到左 column 主轴方向垂直从上到下column-reverse 主轴方向垂直从下到上flex-wrap主轴换行nowrap 不换行默认wrap 自动换行wrap-reverse 反向换行flex-flow 复合属性flex-direction 和 flex-wrapjustify-content主轴对齐flex-start 主轴起点对齐默认flex-end 主轴终点对齐center 居中对齐space-between 均匀分布两端对齐最常用space-around 均匀分布两端距离是中间距离的一半space-evenly 完全平分 注意改变了主轴的方向侧轴方向也随之改变。 侧轴的属性
属性名作用align-items侧轴一行对齐 flex-start 顶端对齐flex-end 尾端对齐 center 水平对齐 baseline : 伸缩项目的第一行文字的基线对齐stretch 如果伸缩项目未设置高度将占满整个容器的高度默认align-content侧轴多行对齐flex-start 顶端对齐flex-end 尾端对齐center 与侧轴的中点对齐space-between 两端对齐中间平均分布space-around 均匀分布上下两端距离是中间距离的一半space-evenly : 完全平分stretch 占满整个侧轴默认
3. flex练习1
用flex完成以下排列 3.1 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleflex练习1/titlestyle*{box-sizing: border-box;margin: 0;padding: 0;}.wrapper{width: 400px;height: 200px;margin: auto;border: 1px solid #ccc;display: flex;/* align-items指定元素在纵轴上的排布方式 */align-items: center;/* justify-content指定元素在主轴上的排布方式 */justify-content: space-around;}.box{width: 40px;height: 40px;border-radius: 50%;background-color: #f00;}/style
/head
bodydiv classwrapperdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/div/div
/body
/html4. flex练习2
用flex完成骰子的点数。 4.1 分析思路 4.2 代码演示
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title骰子点数/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.wrapper {margin: 100px 100px;width: 500px;height: 500px;border-radius: 10px;background-color: #232323;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around;}.dot {width: 20px;height: 20px;border-radius: 50%;background-color: #000;}.box-common {width: 100px;height: 100px;display: flex;background-color: #fff;padding: 4px;margin: 60px;border-radius: 8px;}.box {align-items: center;justify-content: center;}.box2 {flex-direction: column;justify-content: space-between;align-items: center;}/* align-self子元素属性,控制自身的排列 */.dot2-1 {align-self: flex-start;}/* align-self子元素属性,控制自身的排列 */.dot2-2 {align-self: flex-end;}/* 3点的写法 */.box3 {justify-content: space-between;}.dot3-1 {align-self: flex-start;}.dot3-2 {align-self: center;}.dot3-3 {align-self: flex-end;}/* box4 */.box4 {flex-wrap: wrap;}.dot4 {width: 50%;height: 50%;display: flex;}.dot4:nth-child(2) {justify-content: flex-end;}.dot4:nth-child(3) {align-items: flex-end;}.dot4:nth-child(4) {justify-content: flex-end;align-items: flex-end;}/style/headbodydiv classwrapper!-- 一点 父容器主轴居中侧轴居中--div classbox box-commondiv classdot/div/div!-- 二点 主容器主轴为侧轴居中每一个子项单独控制第一个flex-start第二个flex-end--div classbox2 box-commondiv classdot dot2-1/divdiv classdot dot2-2/div/div!-- 三点 同2点写法一样只不过中间的点是center--div classbox3 box-commondiv classdot dot3-1/divdiv classdot dot3-2/divdiv classdot dot3-3/div/div!-- 四点 分为四个部分嵌套两层flex盒子--div classbox4 box-commondiv classdot4div classdot/div/divdiv classdot4div classdot/div/divdiv classdot4div classdot/div/divdiv classdot4div classdot/div/div/div/div/body
/html
5. 青蛙小游戏
Flexbox Froggy弹性盒小青蛙是一个帮助你快速学习前端 Flex 布局的小游戏可以通过玩游戏的方式进行巩固flex知识。
项目地址https://flexboxfroggy.com/
