广州公司做网站,统计网站建设程序,艾艺公司团队定制,信息发布平台推广目录
前言
什么是弹性布局 样式 学习概要
容器和项目
弹性布局的排列方式
1.横向排列#xff08;默认样式#xff09; 2.父元素容器的属性#xff08;*5#xff09;
#xff08;1#xff09;主轴 代码示例#xff1a; #xff08;2#xff09;交叉轴
3.子元素… 目录
前言
什么是弹性布局 样式 学习概要
容器和项目
弹性布局的排列方式
1.横向排列默认样式 2.父元素容器的属性*5
1主轴 代码示例 2交叉轴
3.子元素项目的属性*4 前言 前面我们学习了浮动布局方式那么今天我们学习新的布局方式---弹性布局这类布局方式可以使得我们的页面实现自适应或者按比例缩放的效果不需要去一个个调整那下面我们就一起去看看吧。
什么是弹性布局 传统布局基本依靠display float position来完成有些特殊的布局写起来不太方便。 CSS3 弹性盒 Flexible Box 或 flexbox是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 相较于浮动弹性布局是属于文档流的而浮动是属于脱离文档流的 样式 为父级元素添加 display: flex; 或者 display: inline-flex; 。其子元素则可按照弹性盒模型的规则进行布局。 学习概要 1.什么是容器 2.什么是项目 3.什么是主轴 4.什么是交叉轴 下面我会按照以上的四个问题的方向一一去讲解说明弹性布局的特点和性质搞懂了这四个问题基本上就理解了弹性布局了。
容器和项目 容器是设定了display: flex; 的样式的盒子作为容器 项目容器里面的子类元素就作为项目 看下面代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div{display: flex;width: 800px;height: 500px;border: 2px solid;}/style
/head
body!-- 这里div类是属于容器 --div classdiv!-- 这里的div1是div的子类是属于项目 --div classdiv1!-- 这里的div2是div1的子类但不是项目 --div classdiv2/div/div/div
/body
/html
弹性布局的排列方式 父级为弹性盒模型时子元素默认有一些特殊的展示方式。当然我们可以通过后面的学习知道如何改变这些展示方式。 1.横向排列默认样式
默认盒模型中各子元素上下排列弹性盒模型中子元素默认按主轴从左到右横向排列。可以通过属性改变主轴及主轴起点这就是弹性布局的默认形式。
看代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.divall{width: 800px;height: 600px;border: 1px solid;display:flex;}.div{/* 注意 我把每一个子元素盒子的宽度设置为500px */width: 500px;height: 300px;}.div1{background-color: red;}.div2{background-color: blue;}.div3{background-color: aquamarine;}.div4{background-color: rosybrown;}.div5{background-color: rgb(127, 255, 142);}/style
/head
body!-- 弹性布局盒子 --div classdivalldiv classdiv1 div/divdiv classdiv2 div/divdiv classdiv3 div/divdiv classdiv4 div/divdiv classdiv5 div/div/div
/body
/html
效果展示 子元素总宽大于父级宽度默认不换行按比例缩放各个子元素的宽上面我把每一个子元素盒子的宽度设置为500px实际上整个父元素盒子的宽度只有800px所以这里会按照1:1的形式进行一一缩放直到宽度填满这个父元素盒子的宽度为止这就是弹性布局的自适应特点。 2.父元素容器的属性*5
1主轴
flex-direction flex-direction属性决定主轴的方向默认为row即水平方向起点在左。 子项目按照主轴的方向从起点开始排列。 注意主轴方向是只有一个的主轴数量是可以多个的 row 默认值水平主轴起点在左 row-reverse水平主轴起点在右 column垂直主轴起点在上 column-reverse垂直主轴起点在下 flex-wrap flex-wrap属性决定子元素主轴摆放不下的时候项目换不换行默认不换行。 none 默认值不换行摆放不下按比例缩放 wrap换行第一排在最前 wrap-reverse换行最后一排在最前。 justify-content justify-content属性定义子元素在主轴的对齐方式。 flex-start默认值起点对齐 flex-end终点对齐 center居中 space-between两端对齐中间间隔分均分配 space-around所有间隔分均分配即所有子元素拥有相同的左右(上下)间隔。 space-evenly 所有间隔平均分均 代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.divall{width: 800px;height: 500px;border: 1px solid;display:flex;/* 按x轴为主轴默认 */flex-direction: row;/* 设置为所有间隔分均分配即所有子元素拥有相同的左右(上下)间隔。 */justify-content: space-around;/* 如果子元素宽度大于父元素宽度进行换行 */flex-wrap: wrap;}.div{width: 250px;height: 300px;}.div1{background-color: red;}.div2{background-color: blue;}.div3{background-color: aquamarine;}.div4{background-color: rosybrown;}.div5{background-color: rgb(127, 255, 142);}/style
/head
body!-- 弹性布局盒子 --div classdivalldiv classdiv1 div/divdiv classdiv2 div/divdiv classdiv3 div/divdiv classdiv4 div/divdiv classdiv5 div/div/div
/body
/html
效果如下 以上的主轴是x轴所以会以x轴作为基准如果子元素盒子的高度大于父元素的高度的话那么就胡出现超出的情况。 2交叉轴
align-items align-items定义子元素在副轴的对齐方式。 flex-start副轴起点对齐 flex-end副轴终点对齐 center副轴居中对齐 baseline文本基线对齐 stretch默认值子元素如果没有设置高度(宽度)占满整个容器。如果全部子元素都有设置高度值则表现和flex-start一致。 align-content align-content属性定义多主轴之间也就是换行后行与行之间的对齐方式。所以如果子元素没有换行这个属性就不起作用。 flex-start副轴起点对齐 flex-end副轴终点对齐 center副轴居中对齐 space-between副轴两端对齐中间平均分配 space-around每行之间间距平均分配 strecth默认值如果子元素没有设置高度则占满对应主轴。其余5个值中没有设置高度的子元素和该行最高的高度一样 space-evenly 所有间隔平均分均 3.子元素项目的属性*4
flex-basis flex-basis属性定义在分配空间之前子元素占据的主轴空间大小。默认值auto即元素本来的大小。 这里只接受一个值这个值的大小是表示子元素盒子内容的大小并不是宽度的大小。实际上这个样式一般不怎么用我们一般会提前设置好宽度和高度 如图所示
order order属性定义子元素视觉上的展示顺序值为一个数字越小越优先摆放。如果没设置的话默认是为0. flex-shrink flex-shrink属性用于规定 主轴空间不足时 子元素缩小的分配比例默认为1即分均分配来缩小。 计算方式
style*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 150px;background-color: #99cc99;flex-shrink: 1;}.wrap .d2{width: 200px;background-color: #f60; flex-shrink: 1;}.wrap .d3{width: 250px;background-color: #1da6ba; flex-shrink: 2;}
/style
div classwrapdiv classd11/divdiv classd22/divdiv classd33/div
/div flex-grow flex-grow属性用于规定 主轴有剩余空间时 子元素增大的分配比例默认为0即不增大。 style*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 50px;background-color: #99cc99;}.wrap .d2{width: 150px;flex-grow: 1;background-color: #f60;}.wrap .d3{width: 50px;flex-grow: 2;background-color: #1da6ba;}
/style
div classwrapdiv classd11/divdiv classd22/divdiv classd33/div
/div 好了以上就是今天的全部内容了我们下一期再见
分享一张壁纸
