帮人做违法网站,wordpress评论插件6,怎么对企业进行网站建设,wordpress 热门排行CSS弹性布局
一、概念
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒#xff08; Flexible Box 或 flexbox#xff09;#xff0c;是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一…CSS弹性布局
一、概念
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒 Flexible Box 或 flexbox是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性容器*/ }二、弹性容器属性
2.1 flex-direction属性
顺序指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverserow横向从左到右排列左对齐默认的排列方式。row-reverse反转横向排列右对齐从后往前排最后一项排在最前面。column纵向排列。column-reverse反转纵向排列从后往前排最后一项排在最上面。
示例1:子元素水平排列
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-direction: row; /*默认子元素水平排列*/}示例2子元素水平反向排列
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-direction: row-reverse; /*子元素水平反向排列*/}示例3子元素纵向排列
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-direction: column; /*子元素纵向排列*/}示例4子元素纵向反向排列
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-direction: column-reverse; /*子元素纵向反向排列*/}2.2 justify-content 属性
应用在弹性容器上把弹性项沿着弹性容器的主轴线main axis对齐。
语法
justify-content: flex-start | flex-end | center | space-between | space-aroundflex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线而后续弹性项依次平齐摆放。 flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线而后续弹性项依次平齐摆放。 center 弹性项目居中紧挨着填充。如果剩余的自由空间是负的则弹性项目将在两个方向上同时溢出。 space-between 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项则该值等同于flex-start。否则第1个弹性项的外边距和行的main-start边线对齐而最后1个弹性项的外边距和行的main-end边线对齐然后剩余的弹性项分布在该行上相邻项目的间隔相等。 space-around 弹性项目平均分布在该行上两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项则该值等同于center。否则弹性项目沿该行分布且彼此间隔相等比如是20px同时首尾两边和弹性容器之间留有一半的间隔1/2*20px10px。
示例1头部对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ justify-content: flex-start; /*头部对齐*/}示例2尾部对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ justify-content: flex-end; /*尾部对齐*/}示例3居中对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ justify-content: center; /*居中对齐*/}示例4平均分布1 #box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ justify-content: space-between; /*平均分布1*/}示例4平均分布2
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ justify-content: space-around; /*平均分布2*/}2.3 align-items 属性
设置或检索弹性盒子元素在侧轴纵轴方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretchflex-start弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴起始边界。flex-end弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴结束边界。center弹性盒子元素在该行的侧轴纵轴上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸则会向两个方向溢出相同的长度。baseline如弹性盒子元素的行内轴与侧轴为同一条则该值与’flex-start’等效。其它情况下该值将参与基线对齐。stretch如果指定侧轴大小的属性值为’auto’则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸但同时会遵照’min/max-width/height’属性的限制。 默认值如果弹性子元素没有高度或高度为auto将占满整个容器的高度
示例1侧轴纵轴方向头部对齐 #box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ align-items: flex-start; /*侧轴纵轴方向头部对齐*/}示例2侧轴纵轴方向尾部对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ align-items: flex-end; /*侧轴纵轴方向尾部对齐*/}示例3侧轴纵轴方向居中对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ align-items: center; /*侧轴纵轴方向居中对齐*/}示例4按文本的基线对齐
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ align-items: baseline; /*侧轴纵轴方向按子元素内文本基线对齐*/ }示例5stretch默认值
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ align-items: stretch; /*默认值如果弹性子元素没有高度或高度为auto将占满整个容器的高度*/ }2.4 flex-wrap 属性
用于指定弹性盒子的子元素换行方式。
语法
flex-flow: nowrap|wrap| wrap-reversenowrap - 默认 弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行子项内部会发生断行wrap-reverse -反转 wrap 排列。
示例1不换行子元素的宽度会被压缩
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: nowrap; /*默认值不换行*/ }示例2换行
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap; /*换行*/ }示例3反转 wrap 排列
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap-reverse; /*反转 wrap 排列*/ }2.5 align-content 属性
用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretchstretch - 默认。各行将会伸展以占用剩余的空间。flex-start - 各行向弹性盒容器的起始位置堆叠。flex-end - 各行向弹性盒容器的结束位置堆叠。center -各行向弹性盒容器的中间位置堆叠。space-between -各行在弹性盒容器中平均分布。space-around - 各行在弹性盒容器中平均分布两端保留子元素与子元素之间间距大小的一半。
示例1各行向弹性盒容器的起始位置堆叠
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap;align-content: flex-start; /*各行向弹性盒容器的起始位置堆叠*/}示例2各行向弹性盒容器的结束位置堆叠
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap;align-content: flex-end; /*各行向弹性盒容器的结束位置堆叠*/}示例3各行向弹性盒容器的中间位置堆叠
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap;align-content: center; /*各行向弹性盒容器的中间位置堆叠*/}示例4各行在弹性盒容器中平均分布1 示例5各行在弹性盒容器中平均分布2
#box1{width: 800px;height: 600px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ flex-wrap: wrap;align-content: space-around; /*各行在弹性盒容器中平均分布*/}三、弹性子元素属性
3.1 order属性
子元素排序,用整数值来定义排列顺序数值小的排在前面。可以为负值。
语法
order:integer示例
#box1{width: 800px;height: 200px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ }#box1 div{width:200px;height: 60px; line-height: 60px;text-align: center; }#item1{background-color: red;order:6 /*排序顺序数字越小顺序越靠前*/ }#item2{background-color: yellow;order:5 /*排序顺序数字越小顺序越靠前*/ }#item3{background-color: blue;order:4 /*排序顺序数字越小顺序越靠前*/ }#item4{background-color: green;order:3 /*排序顺序数字越小顺序越靠前*/}#item5{background-color: pink;order:2 /*排序顺序数字越小顺序越靠前*/}#item6{background-color: firebrick;order:1 /*排序顺序数字越小顺序越靠前*/}/stylebodydiv idbox1div iditem11/divdiv iditem22/divdiv iditem33/divdiv iditem44/divdiv iditem55/divdiv iditem66/div/div/body3.2 margin属性
设置margin值为auto值自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为auto可以使弹性子元素在弹性容器的两上轴方向都完全集中。
示例1margin-right,自动获取弹性容器右侧的空间
#item1{background-color: red; margin-right: auto; /*自动获取弹性容器右侧的空间*/}示例2margin-left自动获取弹性容器左侧的空间
#item1{background-color: red; margin-left: auto; /*自动获取弹性容器左侧的空间*/}示例3margin-top自动获取弹性容器上侧的空间
#item1{background-color: red; margin-top:auto /*自动获取弹性容器上侧的空间*/}示例4margin-bottom自动获取弹性容器下侧的空间
#item1{background-color: red; margin-bottom:auto; /*自动获取弹性容器下侧的空间*/}示例4margin自动获取弹性容器上下左右侧的空间
#item1{background-color: red; margin:auto /*自动获取弹性容器上下左右侧的空间*/}3.3 align-self属性
用于设置弹性元素自身在侧轴纵轴方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretchauto如果’align-self’的值为’auto’则其计算值为元素的父元素的’align-items’值如果其没有父元素则计算值为’stretch’。flex-start弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴起始边界。flex-end弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴结束边界。center弹性盒子元素在该行的侧轴纵轴上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸则会向两个方向溢出相同的长度。baseline如弹性盒子元素的行内轴与侧轴为同一条则该值与’flex-start’等效。其它情况下该值将参与基线对齐。stretch如果指定侧轴大小的属性值为’auto’则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸但同时会遵照’min/max-width/height’属性的限制。
3.4 flex-grow属性
用于设置或检索弹性盒的扩展比率
语法
flex-grow: number|initial|inherit;number:一个数字规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0(扩展。
#box1{width: 800px; /*弹性容器的总宽度*/height: 200px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ }
#box1 div{width:100px; /*每个子元素的宽度*/height: 60px; line-height: 60px;text-align: center; }
#item1{background-color: red; flex-grow: 2; /*扩展的空间为剩余空间*1/5即(800-100*3)*2/5200实际宽度为100200300px */}
#item2{background-color: yellow;flex-grow: 2; /*扩展的空间为剩余空间*1/5即(800-100*3)*2/5200实际宽度为100200300px */ }
#item3{background-color: blue;flex-grow: 1; /*扩展的空间为剩余空间*1/5即(800-100*3)*1/5100实际宽度为100100200px */ }3.5 flex-shrink属性
用于设置或检索弹性盒的收缩比率。。
**注意**如果元素不是弹性盒对象的元素则 flex-shrink 属性不起作用。
语法
flex-shrink: number|initial|inherit;number:一个数字规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0
示例
#box1{width: 800px; /*弹性容器的总宽度*/height: 200px;background-color: gray;display: flex; /*将div设置为弹性盒模型对象*/ }#box1 div{width:300px; /*每个子元素的宽度*/height: 60px; line-height: 60px;text-align: center; }#item1{background-color: red; flex-shrink: 2; /*收缩的空间为所有子元素空间之和减弹性容器空间即300*3-800100px,该子元素收缩空间为100*2/540px,该子元素实际宽度为300-40260px*/}#item2{background-color: yellow;flex-shrink: 2; /*收缩的空间为所有子元素空间之和减弹性容器空间即300*3-800100px,该子元素收缩空间为100*2/540px,该子元素实际宽度为300-40260px*/} #item3{background-color: blue;flex-shrink: 1; /*收缩的空间为所有子元素空间之和减弹性容器空间即300*3-800100px,该子元素收缩空间为100*1/520px,该子元素实际宽度为300-20280px*/} 3.6 flex属性
用于指定弹性子元素如何分配空间。
语法
flexnone | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]nonenone关键字的计算值为: 0 0 auto[ flex-grow ]定义弹性盒子元素的扩展比率。[ flex-shrink ]定义弹性盒子元素的收缩比率。[ flex-basis ]定义弹性盒子元素的默认基准值。
示例1flex-grow
#item1{background-color: red; flex:2 /*占2/5的空间*/ }
#item2{background-color: yellow;flex:2 /*占1/5的空间*/ }
#item3{background-color: blue;flex:1 /*占1/5的空间*/ }
