不备案网站怎么做淘宝客,沈阳男科医院排名哪家好,网上接单网站,做经营性的网站备案条件Flexbox布局
刚开始接触flex布局的时候#xff0c;只知道它可以用来使子元素水平垂直居中#xff0c;代码最为简洁好用。
.container {display: flex;justify-content: center;align-items: center;
}
当然不仅仅是居中问题#xff0c;flexbox能做的事情大多#xf…Flexbox布局
刚开始接触flex布局的时候只知道它可以用来使子元素水平垂直居中代码最为简洁好用。
.container {display: flex;justify-content: center;align-items: center;
}
当然不仅仅是居中问题flexbox能做的事情大多能够简单快速解决我们布局所遇到的问题例如
可以轻松实现两列、多列布局自适应屏幕的大小而无需设置块浮动如果元素容器没有足够的空间无需重新计算每个子元素的宽度就可以设置它们在同一行可以快速让子元素布局在一列如小屏幕的时候可以让在子元素相对容器居上、下、左、右、中布局可以通过属性order随时改变元素出现的顺序无需改变HTM结构以便适应屏幕大小不同和设备差异如果元素容器设置百分比sui视窗大小改变不用提心未指定元素的确切宽度而破坏布局因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例
浏览器对最新规范flexbox的支持情况如下 Flex布局概念
弹性布局是指通过调整其内元素的宽高从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间或将其收缩来避免溢出。flex布局模型不同于块和内联模型布局块和内联模型的布局计算依赖于块和内联的流方向而flex布局依赖于flex directions。 Flex container(Flex 容器) 1.flex container
display display: other values | flex | inline-flex 其中1234为div块
2.Orientation
flex-direction(设置flex容器的主轴方向指定flex项目在flex容器中的排列方式水平和纵向两种。) flex-direction: row | row-reverse | column | column-reverserow默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向起点在上端。column-reverse主轴为垂直方向起点在下端。 flex-wrap默认不换行设置了换行wrap/wrap-reverse后子元素大小总和大于容器大小即换行 flex-wrap: nowrap | wrap | wrap-reversenowrap(默认值)不换行wrap伸缩容器多行显示wrap-reverse和wrap相反 flex-flow: ‘flex-direction’ || ‘flex-wrap’(缩写) flex-flow: row nowrap; /* default */
3.Alignment
justify-content(指定flex项目在flex容器沿着主轴在当前行的对齐方式。) justify-content: flex-start | flex-end | center | space-between | space-around 其中space-around的第一个Flex项目左边的间距和最后一个Flex项目右边的间距是其他相相邻flex项目之间间的一半。align-items(指定flex项目在flex容器沿着侧轴在当前行的对齐方式。) align-items: flex-start | flex-end | flex-center | base-line | stetch align-content(针对多行、当你设定flex-wrap: wrap;且容器侧轴大小空间不够) align-content: flex-start | flex-end | center | space-between | space-around | strecth 4.Flex容器无效属性
::first-line || ::first-lettercolumn-*属性
Flex itemsFlex 项目 1.Ordering
order(改变某个flex-item在页面中出现的顺序order值小的排在前面)
2.Alignment
align-self单独设置某个flex-items的属性覆盖align-items设置的样式 align-self: auto | flex-start | flex-end | flex-center | baseline | stretch 3.Flexibility
flex-grow flex-grow: number; /* default 0 */ 按比例划分空间其中“3”块由1/8→2/8→6/8 flex-shrink(与grow相反) flex-shrink: number; /* default 1 */ flex-basis(定义项目占据主轴main size的空间) flex-basis: length | auto; /* default auto */ 下面这个 GIF 表示的是它和 width 属性是可以互换的。但是不完全是这样 注意flex-basis 和 width 不同的地方是它是和 flex 坐标轴保持一致的flex-basis是影响主轴上大小。
设置一定大小的flex-basis值后改变主轴的方向 这个时候改变height而不是widthflex-basis 根据 flex-direction 的不同会影响到 width 或者 height。
flex默认值为0 1 auto flex: none | [ flex-grow flex-shrink? || flex-basis ]
测试所有属性
Flexbox Playground
实例 demo1上面的效果demo demo2:另一个博客结构例子
适用场景
弹性盒子布局主要适用于应用程序的组件及小规模的布局而新兴的栅格布局则针对大规模的布局
拓展阅读
响应式栅格系统Flexbox与网格系统的异同、各自的适用场景
参考资料
Flexbox布局W3C官方文档在学习和阅读其他一些比较老的文章的时候一定要阅读官方的最新文档说明一些老的文章可能使用的是老的语法而新的规范、新的技术在不断更新。使用 CSS 弹性盒子Flexbox详解图解CSS3 Flexbox属性通过动图形象地为你介绍 flexbox 是如何工作的Flex入门
