如何制作网站网页,做的网站如何防止怕爬虫,做废铁在哪个网站推广,如何制作app演示视频目录 一、前言二、Flex布局是什么1、任何一个容器都可以指定为Flex布局2、行内元素也可以使用Flex布局3、Webkit内核的浏览器#xff0c;必须加上-webkit前缀 三、基本概念四、flex常用的两种属性1、容器属性2、项目属性 五、容器属性1、flex-direction①、定义②、语句1… 目录 一、前言二、Flex布局是什么1、任何一个容器都可以指定为Flex布局2、行内元素也可以使用Flex布局3、Webkit内核的浏览器必须加上-webkit前缀 三、基本概念四、flex常用的两种属性1、容器属性2、项目属性 五、容器属性1、flex-direction①、定义②、语句1、属性值 ③、代码示例1、flex-direction: row2、flex-direction: row-reverse3、flex-direction: column4、flex-direction: column-reverse 2、flex-wrap①、定义②、语句1、属性值 ③、代码示例1、flex-wrapnowrap2、flex-wrapwrap3、flex-wrapwrap-reverse 3、flex-flow①、定义②、语句③、代码示例 4、justify-content①、定义②、语句1、属性值 ③、代码示例1、justify-contentflex-start2、justify-contentflex-end3、justify-contentcenter4、justify-contentspace-between5)、justify-contentspace-around 5、align-items①、定义②、语句1、属性值 6、align-content①、定义②、语句1、属性值 六、项目属性1、order①、定义②、语句 2、flex-grow①、定义②、语句1、属性值 3、flex-shrink①、定义②、语句 4、flex-basis①、定义②、语句 5、flex①、定义②、语句1)、属性值 6、align-self①、定义②、语句 七、弹性盒模型布局的应用场景八、弹性盒模型布局的优势1、简化布局2、响应式设计3、灵活性强 九、总结1、实现原理2、布局工作步骤 一、前言 CSS弹性盒子Flexbox是一种强大而灵活的布局模型能够简化我们对网页布局的控制并使页面在不同设备上的适应性更强。本文将介绍CSS弹性盒子的基本概念、属性和使用方法帮助你更好地掌握弹性盒子布局。
二、Flex布局是什么
Flex是Flexible Box的缩写意为“弹性布局”用来为盒状模型提供最大的灵活性。
1、任何一个容器都可以指定为Flex布局
.box{display: flex;
}2、行内元素也可以使用Flex布局
.box{display: inline-flex;
}3、Webkit内核的浏览器必须加上-webkit前缀
.box{display: -webkit-flex;display: flex;
}注意设置为Flex布局以后子元素的float、clear和vertical-align属性将失效 三、基本概念
采用Flex布局的元素称为Flex容器flex container简称“容器”。它的所有子元素自动成为容器成员成为Flex项目flex item简称“项目”。 容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross asix。主轴的开始位置与边框的交叉点叫做main start结束位置叫做main end交叉轴的开始位置叫做cross start结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size占据的交叉轴空间叫做cross size
四、flex常用的两种属性 关于flex常用的属性我们可以划分为容器属性和项目属性 1、容器属性
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
2、项目属性
orderflex-growflex-shrinkflex-basisflexalign-self
五、容器属性
1、flex-direction
①、定义 决定主轴的方向即项目的排列方向 ②、语句
.container {flex-direction: row | row-reverse | column | column-reverse;
}1、属性值
row(默认值)主轴为水平方向起点在左端row-reverse主轴为水平方向起点在右端column主轴为垂直方向起点在上沿column-reverse主轴为垂直方向起点在下沿
③、代码示例
1、flex-direction: row
div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div
/div.container {display: flex;flex-direction: row;
}.item {width: 100px;height: 100px;background-color: #f0f0f0;margin: 10px;
}2、flex-direction: row-reverse
div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div
/div.container {display: flex;flex-direction: row-reverse;
}.item {width: 100px;height: 100px;background-color: #f0f0f0;margin: 10px;
}3、flex-direction: column
div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div
/div.container {display: flex;flex-direction: column;
}.item {width: 100px;height: 100px;background-color: #f0f0f0;margin: 10px;
}4、flex-direction: column-reverse
div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div
/div.container {display: flex;flex-direction: column-reverse;
}.item {width: 100px;height: 100px;background-color: #f0f0f0;margin: 10px;
}2、flex-wrap
①、定义 弹性元素永远沿主轴排列那么如果主轴排不下通过flex-wrap决定容器内项目是否可换行 ②、语句
.container {flex-wrap: nowrap | wrap | wrap-reverse;
}1、属性值
nowrap(默认值)不换行wrap第一行在下方wrap-reverse换行第一行在上方 默认情况是不换行但这里也不会任由元素直接移除容器会涉及到元素的弹性伸缩 ③、代码示例
1、flex-wrapnowrap
div classcontent1div classred1/divdiv classgreen2/divdiv classblue3/div
/div.content1 {color: #fff;font: 100 24px/100px sans-serif;height: 150px;width: 897px;text-align: center;
}.content1 div {height: 50%;width: 300px;
}.content1 {display: flex;flex-wrap: nowrap;
}2、flex-wrapwrap
div classcontentdiv classred1/divdiv classgreen2/divdiv classblue3/div
/div.content {color: #fff;font: 100 24px/100px sans-serif;height: 150px;width: 897px;text-align: center;
}.content div {height: 50%;width: 300px;
}.content {display: flex;flex-wrap: wrap;
}3、flex-wrapwrap-reverse
div classcontent2div classred1/divdiv classgreen2/divdiv classblue3/div
/div.content2 {color: #fff;font: 100 24px/100px sans-serif;height: 150px;width: 897px;text-align: center;
}.content2 div {height: 50%;width: 300px;
}.content2 {display: flex;flex-wrap: wrap-reverse;
}3、flex-flow
①、定义 是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap ②、语句
.box {flex-flow: flex-direction || flex-wrap;
}③、代码示例
element {flex-flow: column-reverse wrap;
}4、justify-content
①、定义 定义了项目在主轴上的对齐方式 ②、语句
.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}1、属性值
flex-start默认值左对齐flex-end右对齐center居中spac-between两端对齐项目之间的间隔相等space-around两个项目两侧间隔相等
③、代码示例
1、justify-contentflex-start div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div/div.container {display: flex;justify-content: flex-start;}.item {width: 100px;height: 100px;background-color: #e18181;margin: 10px;}2、justify-contentflex-end div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div/div.container {display: flex;justify-content: flex-end;}.item {width: 100px;height: 100px;background-color: #e18181;margin: 10px;}3、justify-contentcenter div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div/div.container {display: flex;justify-content: center;}.item {width: 100px;height: 100px;background-color: #e18181;margin: 10px;}4、justify-contentspace-between div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div/div.container {display: flex;justify-content: space-between;}.item {width: 100px;height: 100px;background-color: #e18181;margin: 10px;}5)、justify-contentspace-around div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div/div.container {display: flex;justify-content: space-around;}.item {width: 100px;height: 100px;background-color: #e18181;margin: 10px;}5、align-items
①、定义 定义项目在交叉轴上如何对齐 ②、语句
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}1、属性值
flex-start交叉轴的起点对齐flex-end 交叉轴的终点对齐center交叉轴的中点对齐baseline项目的第一行文字的基线对齐stretch(默认值)如果项目未设置高度或设置为auto将沾满整个容器的高度
6、align-content
①、定义 定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用 ②、语句
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}1、属性值
flex-start与交叉轴的起点对齐flex-end与交叉轴的终点对齐center与交叉轴的中点对齐space-between与交叉轴两端对齐轴线之间的间隔平均分布space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍stretch默认值轴线占满整个交叉轴
六、项目属性
1、order
①、定义 定义项目的排列顺序。数值越小排列越靠前默认为0 ②、语句
.item {order: integer;
}2、flex-grow
①、定义 上面讲到当容器设为 flex-wrap: nowrap不换行的时候容器宽度不够分的情况弹性元素会根据 flex-grow 来决定定义项目的放大比例容器宽度 元素总宽度时如何伸展。默认为0即如果存在剩余空间也不放大 ②、语句
.item {flex-grow: number;
}1、属性值
0(默认值)如果存在剩余空间也不放大如果所有项目的 flex-grow 属性都为1则它们将等份剩余空间如果有的话如果一个项目的flex-grow属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍 注意弹性容器的宽度正好等于元素宽度总和无多余宽度此时无论flex-grow是什么值都不会生效 3、flex-shrink
①、定义 定义了项目的缩小比例容器宽度元素总宽度时如何收缩默认为1即如果空间不足该项目将缩小 ②、语句
.item {flex-shrink: number; /* default 1 */
}如果所有项目的flex-shrink属性都为1当空间不足时都将等比例缩小 如果一个项目的flex-shrink属性为0其他项目都为1则空间不足时前者不缩小 在容器宽度有剩余时flex-shrink也是不会生效的 4、flex-basis
①、定义 设置的是元素在主轴上的初始尺寸所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸 浏览器根据这个属性计算主轴是否有多余空间默认值为auto即项目的本来大小如设置了width则元素尺寸由width/height决定主轴方向没有设置则由内容决定 ②、语句
.item {flex-basis: length | auto; /* default auto */
}当设置为0的是会根据内容撑开 它可以设为跟width或height属性一样的值比如350px则项目将占据固定空间 5、flex
①、定义 flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto也是比较难懂的一个复合属性 ②、语句
.item {flex: none | [ flex-grow flex-shrink? || flex-basis ]
}1)、属性值
flex: 1 flex: 1 1 0%flex: 2 flex: 2 1 0%flex: auto flex: 1 1 autoflex: none flex: 0 0 auto常用于固定尺寸不伸缩 flex:1 和 flex:auto 的区别可以归结于flex-basis:0和flex-basis:auto的区别 当设置为0时绝对弹性元素此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸 当设置为auto时相对弹性元素此时则需要在伸缩时将元素尺寸纳入考虑 注意建议优先使用这个属性而不是单独写三个分离的属性因为浏览器会推算相关值 6、align-self
①、定义 允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性 默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch ②、语句
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}七、弹性盒模型布局的应用场景 Flexbox弹性盒模型布局可以应用于几乎所有需要布局和排列元素的场景特别是在响应式设计中非常重要。以下是一些应用场景 垂直和水平居中元素创建网格布局创建自适应布局管理空间分配和对齐创建交错布局创建多列布局适应不同屏幕大小和设备 总之Flexbox弹性盒模型布局是一种非常灵活的布局方法可用于简单和复杂的布局需求。它还可以与其他CSS属性一起使用例如Grid布局和响应式设计技术这使得它在Web开发中非常有用。 八、弹性盒模型布局的优势
1、简化布局 使用弹性盒子布局可以大大简化我们对网页布局的控制减少定位和浮动等属性的使用 2、响应式设计 弹性盒子布局适应性强可以根据不同的设备和屏幕尺寸自动调整布局实现响应式设计 3、灵活性强 弹性盒子布局具有非常灵活的伸缩性能够适应各种排列和对齐需求提供更好的布局控制 九、总结 Flex弹性布局的出现是为了满足软件界面和功能不断丰富、复杂的市场需求它的核心诉求是子元素的尺寸要能够动态响应父元素尺寸变化并保持一定的结构特征。
1、实现原理 在实现原理上为了满足灵活多变的布局方式flex布局引入一组非常重要的概念 主轴(main axis)flex项延伸的方向决定着下一个flex项的排列位置交叉轴(cross axis)和主轴垂直的方向决定着主轴遇见换行情景时的具体行为细节。
2、布局工作步骤 对flex容器来说整个布局工作可分为三步 第一步所有flex项按照自身尺寸和主轴尺寸进行分行。简单来说当主轴空间容纳不下flex项时进行分行第二步根据上一步所得的分行信息和每一行上flex项特征计算本行所有flex项的主轴尺寸和布局信息第三步通过align-content、align-items和align-self三个属性计算所有flex项在交叉轴上的尺寸和布局信息。 总的来说flex布局的出现让形式丰富多样的网页布局成为可能一方面解放了工程师们的创造力另一方面满足了要求越来越多、越来越复杂的市场需求。
