山东城乡和住房建设厅网站,网络设置网址,图片搜集网站怎么做,河北怀来县建设局网站目录#xff1a;
1、传统布局与flex布局的区别
2、flex的布局原理 3、flex常见的父项属性
3.1、flex-direction #xff1a;设置主轴的方向
3.2、justify-content 设置主轴上的子元素排列方式
3.3、flex-wrap 设置子元素是否换行
3.4、align-items 设置侧轴上的子元素排…目录
1、传统布局与flex布局的区别
2、flex的布局原理 3、flex常见的父项属性
3.1、flex-direction 设置主轴的方向
3.2、justify-content 设置主轴上的子元素排列方式
3.3、flex-wrap 设置子元素是否换行
3.4、align-items 设置侧轴上的子元素排列方式单行
3.5、align-content 设置侧轴上的子元素的排列方式多行 3.6、flex-flowflex-direction 和 flex-wrap 属性的复合属性 4、flex常见的子项属性
4.1、flex
4.2、align-self 控制子项自己在侧轴上的排列方式 1、传统布局与flex布局的区别 2、flex的布局原理
flex 是 flexible Box 的缩写意为弹性布局用来为盒状模型提供最大的灵活性任何一个容器都可以 指定为 flex 布局。
当我们为父盒子设为 flex 布局以后子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 弹性布局 伸缩盒布局 弹性盒布局 flex布局 3、flex常见的父项属性
flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content设置侧轴上的子元素的排列方式多行align-items设置侧轴上的子元素排列方式单行flex-flow复合属性相当于同时设置了 flex-direction 和 flex-wrap
3.1、flex-direction 设置主轴的方向
1、主轴和侧轴的概念 2、flex-direction的属性值 3、例子
如果我想要将flex的子元素从右往左排列的话则需要对父元素添加flex-direction: row-reverse;属性
1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.main {width: 800px;height: 600px;margin: 0 auto;border-radius: 12px;background-color: skyblue;display: flex;flex-direction: row-reverse;}span {width: 200px;margin-left: 10px;height: 100%;border-radius: 12px;background-color: pink;}/style
/headbodydiv classmainspan1/spanspan2/spanspan3/span/div
/body/html
2、 效果图 3.2、justify-content 设置主轴上的子元素排列方式
1、justify-content 的属性值 2、例子
2、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 400px;background-color: pink;/* 我们现在的主轴是y轴 */flex-direction: column;/* justify-content: center; */justify-content: space-between;}div span {width: 150px;height: 100px;background-color: purple;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
3、效果图 3.3、flex-wrap 设置子元素是否换行
1、flex-wrap 属性值 2、例子
1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 600px;height: 400px;background-color: pink;/* flex布局中默认的子元素是不换行的 如果装不开会缩小子元素的宽度放到父元素里面 *//* flex-wrap: nowrap; */flex-wrap: wrap;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div
/body/html
2、效果图 3.4、align-items 设置侧轴上的子元素排列方式单行
1、align-items 属性值 2、例子
1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 400px;background-color: pink;/* 默认的主轴是 x 轴 row */flex-direction: column;justify-content: center;/* 我们需要一个侧轴居中 *//* 拉伸但是子盒子不要给高度 *//* align-items: stretch; */align-items: center;/* align-content: center; */}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
2、效果图 3.5、align-content 设置侧轴上的子元素的排列方式多行
1、align-content属性值 2、例子
1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 400px;background-color: pink;/* 换行 */flex-wrap: wrap;/* 因为有了换行此时我们侧轴上控制子元素的对齐方式我们用 align-content *//* align-content: flex-start; *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div
/body/html
2、效果图 3.6、flex-flowflex-direction 和 flex-wrap 属性的复合属性
1、flex-flow 属性值 4、flex常见的子项属性
4.1、flex
1、flex属性 2、例子 1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.main {width: 800px;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;margin-left: 10px;}/style
/headbodydiv classmainspan1/spanspan2/spanspan3/span/div
/body/html
2、效果图 4.2、align-self 控制子项自己在侧轴上的排列方式 1、定义
align-self order 2、例子
1、代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.main {width: 90%;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;flex-direction: row;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;align-self: flex-end;margin-left: 10px;}.main span:nth-child(3) {height: 100px;border-radius: 12px;order: -1;margin-left: 10px;}/style
/headbodydiv classmainspan1/spanspan2/spanspan3/span/div
/body/html
2、效果图
