多种语言网站制作,申请wordpress,微信h5手机网站,免费云电脑永久使用个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 Flex布局1 Flex容器和Flex项目2 Flex 容器属性2.1 主轴的方向2.2 主轴对齐方式… 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 Flex布局1 Flex容器和Flex项目2 Flex 容器属性2.1 主轴的方向2.2 主轴对齐方式2.3 Flex 项目换行2.4 交叉轴对齐方式2.4.1 align-items属性2.4.2 align-content属性 3 Flex 项目属性3.1 Flex项目排序3.2 Flex 项目交叉轴对齐方式3.2 放大比例3.3 收缩比例3.4 Flex项目基准宽度 Flex布局
Flex是Flexible Box的缩写意为”弹性放大、缩小布局”用来为盒状模型提供最大的灵活性。
flex布局是目前主流的布局方式结合盒子模型定位可以快速实现页面各种复杂布局。
大部分场景下可以代替浮动布局特殊场景下比如文字环绕效果还得使用浮动布局更方便。 学习Flex布局搞清楚几个重要的概念
flex containerflex 容器flex itemflex 项目针对容器的子级main axis主轴默认是水平方向cross axis交叉轴默认是垂直方向main start主轴和 flex 容器左边的交叉点main end主轴和 flex 容器右边的交叉点cross start交叉轴和 flex 容器上边的交叉点cross end交叉轴和 flex 容器下边的交叉点main sizeflex 项目占据的主轴宽度可伸缩cross sizeflex 项目占据的交叉轴高度可伸缩
flex 项目默认沿主轴排列
1 Flex容器和Flex项目
指定一个 Flex 容器
style
.box {display: flex;/*display: inline-flex;*/
}
/style
div classboxdiv/divspan/span文字input typetext
/divFlex 容器的子级全部变成 Flex 项目不管你原来是 blockinline-blockinline 都会设置为 flex 项目display: block一样对待。 flex项目变成block这个block和之前学习position:absolute、fixed以及float:left|right的块级类似虽然计算属性display:block但是表现形式和行内块类似默认都是内容的宽度但是可以设置宽度、高度、外边距、内边距、边框等等 2 Flex 容器属性
2.1 主轴的方向
flex-direction属性决定主轴的方向即项目的排列方向。
flex-direction: row | row-reverse | column | column-reverse;row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。很少使用column主轴为垂直方向起点在上沿。交叉轴就变成水平column-reverse主轴为垂直方向起点在下沿。交叉轴就变成水平。很少使用
2.2 主轴对齐方式
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;它可能取5个值具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start默认值左对齐flex-end右对齐center 居中space-between两端对齐项目之间的间隔都相等。space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。space-evenly每个间隙距离相等. (兼容处理用 space-between配合beforeafter使用) 2.3 Flex 项目换行
默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行。
Flex容器指定了具体宽度所有的Flex项目总宽度 Flex容器宽度
flex-wrap: nowrap | wrap | wrap-reverse;它可能取三个值。
1、nowrap默认不换行。Flex宽度700px每个Flex项目宽度为100px 1000px 700px只能收缩至70px 2、wrap换行第一行在上方。 3、wrap-reverse换行第一行在下方。很少使用 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。很少使用
flex-flow: flex-direction flex-wrap;2.4 交叉轴对齐方式
2.4.1 align-items属性
align-items属性设置 flex项目在每个 flex 行的交叉轴上的默认对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;它可能取5个值。具体的对齐方式与交叉轴的方向有关下面假设交叉轴从上到下。
flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。很少使用stretch默认值没有交换主轴和交叉轴方向的情况下如果Flex项目未设置高度或设为auto将占满整个容器的高度。如果flex项目有高度则不会被拉伸占满高度也可以会超过flex容器 【实践】利用justify-content和align-items快速实现水平垂直居中
与之前的 position:absolute margin 水平垂直居中更好不脱标不会遮盖等问题
2.4.2 align-content属性
align-content属性只适用多行的flex容器flex 项目不止一行时该属性才有效果它的作用是当flex容器在交叉轴上有多余的空间时将flex 项目作为一个整体属性值为flex-start、flex-end、center时进行对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;未指定 flex-wrap: wrap; 那么 align-content 属性是无效的 翻译flex wrappe:nowrap属性防止align-content产生效果。 尝试将flex-wrap设置为nowrap以外的其他内容。 说白了nowrap无效设置 wrap-reverse 或者 wrap 是可以的只要换行才可以对align-content产生效果 只要设置了flex-wrap: wrap表示存在多行那么就用align-content否则单行总是用align-items即可 该属性可能取6个值。
flex-start与交叉轴的起点对齐。flex-end与交叉轴的终点对齐。center与交叉轴的中点对齐。space-between与交叉轴两端对齐轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认值轴线占满整个交叉轴。如果flex项目有高度则不会被拉伸占满高度也可以会超过flex容器 3 Flex 项目属性
3.1 Flex项目排序
order属性定义项目的排列顺序。数值越小排列越靠前默认为0。很少使用
order: integer;3.2 Flex 项目交叉轴对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}该属性可能取6个值除了auto其他都与align-items属性完全一致。 该属性可能取6个值除了auto其他都与align-items属性完全一致。
auto 表示继承 Flex 容器的 align-items 属性的值。
3.2 放大比例
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时即父元素会有剩余空间子元素如何分配父元素的剩余空间。 flex-grow 的默认值为 0意思是该元素不索取父元素的剩余空间如果值大于0表示索取。值越大索取的越厉害。
flex-grow: number; /* default 0 */如果所有项目的flex-grow属性都为1则它们将等分剩余空间如果有的话。如果一个项目的flex-grow属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍。 假如设置父元素 400px子元素 A 为100px子元素 B 为 200px.则剩余空间为 100px 例子一 A的 flex-grow 为 0B的 flex-grow 为 0即A、B不设置该属性 则A、B的实际宽度为他们本身的宽度即A的实际宽度为100px B的实际宽度为200px 例子二 A的 flex-grow 为1B的 flex-grow为0即不设置该属性 则A的实际宽度为 100px 100px 200px B的实际宽度为 200px 0 200px 例子三 A的 flex-grow 为 1B的 flex-grow 为 2 则 A 的实际宽度为 100px 100px * 1/3 400/3 px , B的实际宽度为 200px 100px * 2/3 800/3 px 上面的 总系数为 1 2 3 然后按照 各元素的 flex-grow 的属性值进行分配 A 1/3 B 2/3 结论 d 剩余空间g1 flex-grow1g2 flex-grow2A A宽度B B宽度设 At A最终分配的宽度Bt B最终分配的宽度当 d 0At A d * (g1 / g1 g2)Bt B d * (g1 / g1 g2) 最终结果 At Bt A B d 父盒子的宽度达到扩展 3.3 收缩比例
该属性用来设置子元素的 缩小比例当父元素的宽度小于所有子元素的宽度的和时即子元素会超出父元素子元素如何缩小自己的宽度的。 **flex-shrink **的默认值为 1当父元素的宽度小于所有子元素的宽度的和时子元素的宽度会减小。值越大减小的越厉害。如果值为 0表示不减小。 假如设置父元素 400px子元素A为 200px子元素B为 300px.则超出空间为 100px 例子一 设置A的 flex-shrink 为 0B的 flex-shrink 为 0 则AB都不减小宽度A、B的实际宽度为他们本身的宽度即A的实际宽度为 200px B的实际宽度为 300px 例子二 A的 flex-shrink 为 0B的 flex-shrink 为 1则A不减小宽度B减小 则A的实际宽度为他本身的宽度 200px B的实际宽度为 300px - 100px超出的宽度 200px 例子三 如果AB都减小宽度A设置 flex-shirk 为 3B设置 flex-shirk 为 2。则最终 A 的大小为 自身宽度 (200px) - A减小的宽度(100px * (200px * 3 / (200px * 3 300px * 2))) 150px 最终 B 的大小为 自身宽度 (300px)- B减小的宽度 (100px * (300px * 2/(200px* 3 300px* 2))) 250px 结论 d 超出空间g1 flex-shrink1g2 flex-shrink2A A宽度B B宽度设 At A最终分配的宽度Bt B最终分配的宽度当 d 0At A - d * ( A * g1 / (A * g1 B * g2) )Bt B - d * ( B * g2 / (A * g1 B * g2) ) 最终结果 At Bt A B - d 父盒子的宽度达到收缩 3.4 Flex项目基准宽度
basis 的中文意思就是 基础、基准 该属性用来设置元素的宽度通常情况下大家使用 width 设置宽度。但是如果元素上同时设置了 width 和 flex-basis 那么 width 的值就会被 flex-basis 覆盖掉。其实就是flex 项目占据的主轴宽度main size可伸缩
flex-basis: length | auto; /* default auto */放大比例flex-grow和收缩比例flex-shrink都是更加基准宽度flex-basis来进行计算的如果没有基准宽度flex-basis那么就去使用width如果width也没有就会自动计算。
style.father {display: flex;width: 400px;height: 200px;}.box {width: 200px;height: 100px;flex-basis: 300px;background: blue;}
/style
div classfatherdiv classbox/div
/div可以看到给父元素添加 displayflex 属性后让其变成 flex 布局 子元素的 width 设置成 200 px flex-basis 设置成 300 px最终显示为 300px width 的值就被 flex-basis 覆盖掉这个属性比较好理解 flex 属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ flex-grow flex-shrink? || flex-basis ]
}该属性有两个快捷值auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性而不是单独写三个分离的属性因为浏览器会推算相关值。
