动态效果的网站建设,长春880元网站建设,电子商城网站制作数据库,成都市建设质监站网站Flex 是 Flexible Box 的缩写#xff0c;意为弹性盒子布局。
CSS3中一种新的布局模式#xff1a;W3C在2009年提出的一种布局方案#xff0c;一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。其目的是提供一种更加有效的方式来对一个容器…Flex 是 Flexible Box 的缩写意为弹性盒子布局。
CSS3中一种新的布局模式W3C在2009年提出的一种布局方案一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。其目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。目前它已经得到了所有浏览器的支持这意味着现在就能很安全地使用这项功能。 弹性盒子布局由弹性容器(Flex container) 和 弹性子元素(Flex item) 组成
容器采用Flex布局的元素(设置了元素的display:flex)称为Flex容器flex container简称”容器”。容器默认存在两根轴分别为水平的主轴main axis和垂直的交叉轴cross axis默认水平方向为主轴项目Flex容器中的子元素称为 Flex 项目flex item简称“项目”。项目的 float、clear和vertical-align属性将失效。
1. Flex容器有如下属性
flex-direction设置容器的主轴方向即项目的排列方向 flex-wrap设置当项目超出容器时是否换行 flex-flowflex-direction 和 flex-wrap 两个属性的简写 justify-content设置项目在主轴横轴方向上的对齐方式 align-items设置项目在交叉轴纵轴方向上的对齐方式 align-content设置容器内多行在交叉轴上的排列方式 注这几个属性的可选值都还有两个值initial 和 inherit。initial 表示将此属性设置为属性的默认值inherit 表示从父元素继承属性的值此文对这两个可选值省略不表。
1.1 flex-direction 属性设置容器的主轴方向其属性可选值如下
row 默认值主轴沿水平方向从左到右row-reverse主轴沿水平方向从右到左column主轴沿垂直方向从上到下column-reverse主轴沿垂直方向从下到上
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.row-container,.row-reverse-container,.column-container,.column-reverse-container{display: flex;background-color: aqua;}.row-container{flex-direction:row;}.row-reverse-container{flex-direction:row-reverse;}.column-container{flex-direction:column;}.column-reverse-container{flex-direction:column-reverse;}.row-container div,.row-reverse-container div,.column-container div,.column-reverse-container div{width: 80px;height: 20px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classrow-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classrow-reverse-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcolumn-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcolumn-reverse-containerdiv1/divdiv2/divdiv3/divdiv4/div/div/body
/html1.2 flex-wrap设置当项目超出容器时是否换行其属性可选值如下
nowrap默认值项目不会换行但项目宽度会都等比例缩短达不到设定的宽度wrap项目会换行项目宽度不变wrap-reverse项目会换行但会以相反的顺序项目宽度不变 注主轴是横轴或纵轴都是如此
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.nowrap-container,.wrap-container,.wrap-reverse-container{display: flex;background-color: aqua;flex-direction:row;}.nowrap-container{flex-wrap:nowrap;}.wrap-container{flex-wrap:wrap;}.wrap-reverse-container{flex-wrap:wrap-reverse;}.nowrap-container div,.wrap-container div,.wrap-reverse-container div{width: 80px;height: 20px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classnowrap-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classwrap-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classwrap-reverse-containerdiv1/divdiv2/divdiv3/divdiv4/div/div/body
/html1.3 flex-flowflex-direction 和 flex-wrap 两个属性的简写 如flex-flow:column wrap
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.container{height: 80px;display: flex;background-color: aqua;flex-flow:column wrap;}.container div{width: 80px;height: 20px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classcontainerdiv1/divdiv2/divdiv3/divdiv4/div/div/body
/html1.4 justify-content设置项目在主轴横轴方向上的对齐方式其属性可选值如下
flex-start默认值左对齐flex-end右对齐center居中space-between两端对齐项目之间的间隔是相等的space-around每个项目两侧的间隔相等
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.content-start-container,.content-end-container,.content-center-container,.content-space-between-container,.content-space-around-container{display: flex;background-color: aqua;flex-direction:row;margin-top: 10px;}.content-start-container{justify-content: flex-start;}.content-end-container{justify-content: flex-end;}.content-center-container{justify-content: center;}.content-space-between-container{justify-content: space-between;}.content-space-around-container{justify-content: space-around;}.content-start-container div,.content-end-container div,.content-center-container div,.content-space-between-container div,.content-space-around-container div{width: 80px;height: 20px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classcontent-start-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcontent-end-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcontent-center-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcontent-space-between-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classcontent-space-around-containerdiv1/divdiv2/divdiv3/divdiv4/div/div/body
/html1.5 align-items设置项目在交叉轴纵轴方向上的对齐方式其属性可选值如下
stretch默认值项目将被拉伸以适合容器(当项目不设置高度时)center项目于容器中央对齐(当项目高度一致时对齐项目高度不一致时项目垂直居中)flex-start项目位容器顶部对齐flex-end项目于容器的底部对齐baseline项目与容器的基线对齐
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.items-stretch-container,.items-center-container,.items-start-container,.items-end-container,.items-baseline-container{display: flex;background-color: aqua;margin-top: 10px;height: 80px;}.items-stretch-container{align-items: stretch;}.items-center-container{align-items: center;}.items-start-container{align-items: flex-start;}.items-end-container{align-items: flex-end;}.items-baseline-container{align-items: baseline;}.items-stretch-container div,.items-center-container div,.items-start-container div,.items-end-container div,.items-baseline-container div{width: 80px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classitems-stretch-containerdiv1/divdiv2/divdiv3/divdiv4/div/divdiv classitems-center-containerdiv styleheight: 20px;1/divdiv styleheight: 30px;2/divdiv styleheight: 40px;3/divdiv styleheight: 50px;4/div/divdiv classitems-start-containerdiv styleheight: 20px;1/divdiv styleheight: 30px;2/divdiv styleheight: 40px;3/divdiv styleheight: 50px;4/div/divdiv classitems-end-containerdiv styleheight: 20px;1/divdiv styleheight: 30px;2/divdiv styleheight: 40px;3/divdiv styleheight: 50px;4/div/divdiv classitems-baseline-containerdiv styleheight: 20px;font-size: 20px;1/divdiv styleheight: 30px;font-size: 5px;2/divdiv styleheight: 40px;font-size: 30px;3/divdiv styleheight: 50px;font-size: 10px;4/div/div/body
/html1.6 align-content设置项目多跟轴线的对齐方式其属性可选值如下
注容器内必须有多行的项目该属性才能渲染出效果。
stretch 默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数该值等效于flex-start。在其它情况下剩余空间被所有行平分以扩大它们的侧轴尺寸。注项目没有高度时才会占满整个交叉轴 。有高度时将是高度大小则项目之间会有间隔 center项目在容器内居中排布flex-start项目在容器的顶部排列各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界之后的每一行都紧靠住前面一行flex-end项目在容器的底部排列各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界之后的每一行都紧靠住前面一行。space-between多行项目均匀分布在容器中其中第一行分布在容器的顶部最后一行分布在容器的底部space-around多行项目均匀分布在容器中并且每行的间距包括离容器边缘的间距都相等
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.align-stretch-container,.align-center-container,.align-start-container,.align-end-container,.align-space-between-container,.align-space-around-container{display: flex;background-color: aqua;margin-top: 10px;height: 120px;flex-flow: row wrap;}.align-stretch-container{align-content: stretch;}.align-center-container{align-content: center;}.align-start-container{align-content: flex-start;}.align-end-container{align-content: flex-end;}.align-space-between-container{align-content: space-between;}.align-space-around-container{align-content: space-around;}.align-stretch-container div,.align-center-container div,.align-start-container div,.align-end-container div,.align-space-between-container div,.align-space-around-container div{width: 80px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classalign-stretch-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classalign-center-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classalign-start-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classalign-end-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classalign-space-between-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classalign-space-around-containerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/div/body
/html2. Flex容器内项目有如下属性
order设置项目的排序顺序 flex-grow设置项目相对于其他项目的增长量(如果容器还有多余空间)也可以说是定义项目的放大比例默认值为 0(即如果存在多余空间也不放大) flex-shrink设置项目相对于其他项目的收缩量(如果容器空间不够)也可以说是定义项目的缩小比例默认值为 1(一起按比例缩小) flex-basic设置项目的初始长度 flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性默认值为0 1 auto。后两个属性可选 align-self为某个项目设置不同于其它项目的对齐方式该属性可以覆盖 align-items 属性的值 2.1 order设置项目的排序顺序
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.flex-container{display: flex;background-color: aqua;margin-top: 10px;}.flex-container div{width: 80px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classflex-containerdiv styleorder: 1;1/divdiv styleorder: 4;2/divdiv styleorder: 2;3/divdiv styleorder: 3;4/div/div/body
/html2.2 flex-grow设置项目相对于其他项目的增长量(如果容器还有多余空间)也可以说是定义项目的放大比例默认值为 0(即如果存在多余空间也不放大)当容器没有多余空间时该属性失效 当容器有剩余空间时将所有flex-grow的取值相加得到分母sum每个属性的数值作为分子然后乘以剩余空间即是项目要扩展的空间再加上项目本来的空间即是项目所占的总空间
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/css.flex-container{display: flex;background-color: aqua;margin-top: 10px;}.flex-container div{width: 80px;padding: 3px;border: 1px solid #CCC;margin: 5px;background-color: aliceblue;} /style/headbodydiv classflex-containerdiv styleflex-grow: 1;1/divdiv styleflex-grow: 3;2/divdiv styleflex-grow: 2;3/divdiv styleflex-grow: 0;4/div/div/body
/html2.3 flex-shrink设置项目相对于其他项目的收缩量(如果容器空间不够)也可以说是定义项目的缩小比例默认值为 1(一起按比例缩小)计算公式和 flex-grow 放大公式类似 2.4 flex-basic设置项目的初始长度默认值 auto即项目本来的长度 2.5 flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
语法格式为flex: flex-grow flex-shrink flex-basis。
默认值为0 1 auto。后两个属性可选两个快捷值auto (1 1 auto) 和 none (0 0 auto) 我们更常用到 flex 属性的用法是只有 flex-grow 一个参数的值flex:1 或者 flex:2 等等相当于 flex:1 1 0 或者 flex:2 1 0表示项目在 flex-basic 为 0 的基础上伸缩。其等效效果为 各项目长度占容器长度 flex:? 的取值的比例。 2.6 align-self为某个项目设置不同于其它项目的对齐方式该属性可以覆盖 align-items 属性的值。
默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。
该属性可能取6个值除了auto其他都与align-items属性完全一致。
