本文详细介绍了CSS布局中的关键概念，包括flexbox和grid布局。flexbox用于创建一维布局，通过display:flex实现，重点讲解了flex-direction、align-items、justify-content等属性。grid布局则是一个二维系统，通过display:grid设置，强调了grid-template-columns/rows、gap、repeat()函数以及grid-template-areas的使用。此外，还回顾了传统的float和position定位方式，以及多列布局的属性。
在css中设定页面布局的主要方法是设置 display 属性的值。
在讨论布局时，最重要的是 display: flex 和 display: grid。
flex弹性盒子布局
fexbox弹性盒子布局，是专门设计出来用来创建横向或纵向的一维页面布局。
要使用fexbox弹性盒子布局，只需在需要进行flex布局的父元素上应用display:flex，所有直接子元素都将会按照flex进行布局。
flex父元素,flex-direction的初值为 row，align-items的初值为 stretch。
将子元素的flex设置为1，那么这个元素将占用布局方向可用空间平均份的一个空间单位。
flex: 1 100px 表示每个 flex 项将首先给出 100px 的可用空间，然后，剩余的可用空间将根据分配的比例共享。
flex-direction 它可以指定主轴的方向。
长久以来，css布局中唯一可靠且跨浏览器兼容的创建工具只有floats和positioning。
在flex项上设置flex值，意味着flex项至少为这个指定的宽度。
flex-direction和 flex-wrap可以缩写为 flex-flow: row wrap。
align-items 控制flex项在交叉轴上的位置，默认是 stretch，可以是center，交叉轴方向居中对齐，也可以是flex-start或flex-end，在交叉轴开始或结束的位置对齐。
单独对齐flex项，例如：align-self:flex-start 。
justify-content 控制 flex 项在主轴上的位置, 默认是 flex-start，也可以是 center，flex-end，space-around，space-between，space-between是两端不留空袭。
order使flex项按顺序对齐排列，默认为0值大的比值小的排在后面，相同的值按源顺序排列。
最低0.47元/天 解锁文章
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
