建设网站二级子页打不开,jsp网站开发视频,企业seo平台,线上商城推广软文特点
子元素宽度之和小于父元素宽度#xff0c;所有子元素最终的宽度就是原来定义的宽度。子元素宽度之和大于父元素宽度#xff0c;子元素会按比例来划分宽度。在使用弹性盒子模型之前#xff0c;必须为父元素定义“display:flex;”或“display:inline-flex;”。 弹性盒子…特点
子元素宽度之和小于父元素宽度所有子元素最终的宽度就是原来定义的宽度。子元素宽度之和大于父元素宽度子元素会按比例来划分宽度。在使用弹性盒子模型之前必须为父元素定义“display:flex;”或“display:inline-flex;”。 弹性盒子模型属性 属性 说明 flex-grow 定义子元素的放大比例 flex-shrink 定义子元素的缩小比例 flex-basis 定义子元素的宽度 flex flex-grow、flex-shrink、flex-basis 的复合属性 flex-direction 定义子元素的排列方向 flex-wrap 定义子元素是单行显示还是多行显示 flex-flow flex-direction、flex-wrap的复合属性 order 定义子元素的排列顺序 justify-content 定义子元素在“横轴”上的对齐方式 align-items 定义子元素在上的对齐方式“纵轴” 放大比例flex-grow
flex-grow属性用来定义弹性盒子内部子元素的放大比例。当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间。
语法
父元素{display:flex;}子元素{flex-grow: 数值;}
flex-grow属性取值是一个数值默认值为0。当取值为0时表示不索取父元素的剩余空间当取值大于0时表示索取父元素的剩余空间即子元素放大。取值越大索取得越多。 缩小比例flex-shrink
flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度。
语法
父元素{display:flex;}子元素{flex-shrink: 数值;}
flex-shrink属性取值是一个数值默认值为1。当取值为0时表示子元素不缩小当取值大于1时表示子元素按一定的比例缩小。取值越大缩小得越厉害。 元素宽度flex-basis
flex-basis属性用于定义弹性盒子内部的子元素在分配空间之前该子元素所占的空间大小。浏览器会根据这个属性计算父元素是否有多余空间。flex-basis相当于width用来定义子元素的宽度。在弹性盒子中flex-basis的语义会比width更好。如果某一个子元素同时设置flex-basis和width那么flex-basis的值会覆盖width的值。
语法
父元素{display:flex;}子元素{flex-basis: 取值;}
flex-basis属性取值有两个一个是“auto”即该子元素的宽度是根据内容多少来定的另一个是“长度值”单位可以为px、em和百分比等。 复合属性flex
flex属性可以同时设置flex-grow、flex-shrink、flex-basis这3个属性。
语法
父元素{display:flex;}子元素{flex: grow shrink basis;}
参数grow是flex-grow的取值参数shrink是flex-shrink的取值参数basis是flex-basis的取值。flex属性的默认值为“0 1 auto”。 排列方向flex-direction
flex-direction属性用来来定义弹性盒子内部“子元素”的排列方向。即定义子元素是横着排还是竖着排。flex-direction属性是在弹性盒子即父元素上定义的。
语法
父元素{display:flex;flex-direction: 取值;
} flex-direction属性取值 属性值 说明 row 横向排列(默认值) row-reverse 横向反向排列 column 纵向排列 column-reverse 纵向反向排列 多行显示flex-wrap
flex-wrap属性用来定义弹性盒子内部“子元素”是单行显示还是多行显示。
语法
父元素{display:flex;flex-wrap: 取值;
} flex-wrap属性取值 属性值 说明 nowrap 单行显示(默认值) wrap 多行显示也就是换行显示 wrap-reverse 反向多行显示 复合属性flex-flow
flex-flow属性用来同时设置flex-direction、flex-wrap这两个属性。
语法
父元素{display:flex;flex-flow: direction wrap;
}
参数direction是flex-direction的取值参数wrap是flex-wrap的取值。flex-flow属性的默认值为“row nowrap”。 排列顺序order
order属性用来定义弹性盒子内部“子元素”的排列顺序。
语法
父元素{display:flex;}
子元素{order:整数;}
order属性取值是一个正整数即1、2、3等。 水平对齐justify-content
justify-content属性来定义弹性盒子内部子元素在“横轴”上的对齐方式。
语法
父元素{display:flex;justify-content: 取值;
} 属性值 说明 flex-start 所有子元素在左边(默认值) center 所有子元素在中间 flex-end 所有子元素在右边 space-between 所有子元素平均分布 space-around 所有子元素平均分布但两边留有一定间距 垂直对齐align-items
align-items属性用来定义弹性盒子内部子元素在“纵轴”上的对齐方式。
语法
父元素{display:flex;align-items: 取值;
} 属性值 说明 flex-start 所有子元素在上边(默认值) center 所有子元素在中部 flex-end 所有子元素在下边 baseline 所有子元素在父元素的基线上 stretch 拉伸子元素以适应父元素高度
