2024年10月flex布局和grid布局（Grid 布局）
⑴flex布局和grid布局（Grid布局
⑵Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
⑶Flex布局是轴线布局，只能指定“项目“针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成“行“和“列“，产生单元格，然后指定“项目所在“的单元格，可以看作是二维布局。Grid布局远比Flex布局强大。
⑷display布局grid-template-columns列grid-template-rows行grid-template-areas区域grid-template行列区域简写
⑸grid-column-gap列间隔grid-row-gap行间隔grid-gap简写
⑹justify-items项目内容横向排列方式align-items项目内容纵向排列方式place-items简写
⑺justify-content内容横向排列方式align-content内容纵向排列方式place-content简写
⑻grid-auto-columns隐式（多出来未定义的格子列宽grid-auto-rows隐式（多出来未定义的格子行高
⑼grid-auto-flow排列方式
⑽grid行列区域隐式格子宽隐式格子高排列方式简写
⑾grid-column-start定位列线开始位置grid-column-end定位列线结束位置grid-column简写
⑿grid-row-start定位行线开始位置grid-row-end定位行线结束位置grid-row简写
⒀grid-area区域
⒁justify-self单个项目内容横向对其方式align-self单个项目内容纵向对其方式place-self简写
⒂grid-template是grid-template-rows，grid-template-columns，grid-template-areas简写属性
⒃grid-column-gap==column-gap
⒄grid-row-gap==row-gap
⒅grid-gap==gap
⒆在一个声明中设置所有以下属性的简写：grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,和grid-auto-flow。（注意：您只能在单个网格声明中指定显式或隐式网格属性。
⒇grid-column-start|grid-column-end列从第几根线开始，第几根线结束
⒈grid-row-start|grid-row-end行从第几根线开始，第几根线结束
⒉grid-column|grid-row简写
⒊web前端--网页布局（盒子模式、弹性盒子、网格
⒋布局的传统解决方案，基于，于那些特殊布局非常不方便。Flex是FlexibleBox的缩写，意为“弹性布局“，用来为盒状模型提供最大的灵活性。年诞生的这个属性可以说是不亚于css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆。
⒌通过display：flex将对象设置为弹性盒子，以下属性必须熟记于心。
⒍采用Flex布局的元素，称为Flex容器（flexcontainer，简称“容器“。它的所有子元素自动成为容器成员，称为Flex项目（flexitem，简称“项目“。
⒎容器默认存在两根轴：水平的主轴（mainaxis和垂直的交叉轴（crossaxis。主轴的开始位置（与边框的交叉点叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。项目默认沿主轴排列。单个项目占据的主轴空间叫做mainsize，占据的交叉轴空间叫做crosssize。容器属性：flex-direction（决定主轴的方向flex-wrap（决定是否换行flex-flow（《flex-direction》||《flex-wrap》;justify-content（主轴方向对齐方式align-items（交叉轴方向对齐方式align-content（多轴情况下沿交叉轴对齐方式项目属性：order：数值越小，排列越靠前，默认为。flex-grow:项目的放大比例，默认为flex-shrink:项目的缩小比例，默认为flex-basis:项目占据主轴的大小flex：flex-grow,flex-shrink和flex-basis的简写，默认值为auto两个快捷值：auto(auto)和none(auto)align-self：单个项目有与其他项目不一样的对齐方式
⒏flex-box无疑是布局上面的神器
⒐网格布局同样是布局方面的神器，目前不太常用。display:grid;设置网格必须使用display:grid将容器元素定义为一个grid(网格)布局，使用grid-template-columns和grid-template-rows设置列和行的尺寸大小，然后通过grid-column和grid-row将其子元素放入这个grid(网格)中网格属性：display：grid|subgrid
⒑grid-template-columns：设置列grid-template-rows：设置行grid-template-areas：设置区域
⒒grid-template：none|subgrid|《grid-template-rows》/《grid-template-columns》;前面三个属性合体
⒓grid-column-gap：设置列间距grid-row-gap：设置行间距grid-gap：《grid-row-gap》《grid-column-gap》;前两个属性合体
⒔justify-items：start|end|center|stretch;设置项目水平方向对齐方式align-items：start|end|center|stretch;设置项目垂直方向对齐方式
⒕justify-content：start|end|center|stretch|space-around|space-between|space-evenly;设置网格水平对齐方式align-content：start|end|center|stretch|space-around|space-between|space-evenly;设置网格垂直对齐方式
⒖grid-auto-columns：自动补齐列grid-auto-rows：自动补齐行
⒗grid-auto-flow：row|column|rowdense|columndensegrid
⒘grid-column-startgrid-column-endgrid-row-startgrid-row-end
⒙grid-column：项目放置列grid-row：项目放置行
⒚grid-areajustify-selfalign-self
⒛你不知道的CSS布局之grid&flex
默认子元素按行排列Flexbox布局是一维布局方式，要么按行排列，要么按列排列。align-items控制交叉轴，justify-content控制主轴,始终不变。flex-basis是用来设置mainsize的。使用flex-basis，可以同时管理行模式下的宽度和列模式下的高度。此时width失效，但是可以用min-width限制在列模式下，设置高度flex容器在有剩余空间的时候，子元素占据剩余空间的占比。适合一些浮动的布局。超过边界自动换行
grid布局，阮一峰写的非常详细。
grid-column-start属性，grid-column-end属性，grid-row-start属性，grid-row-end属性
.item{justify-self:start|end|center|stretch;align-self:start|end|center|stretch;}
html布局的常用的四种实现方式
需求：假设高度默认px，请写出三栏布局，其中左栏、右栏各为px，中间自适应
将左右的div宽度设为px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况
正常的渲染效果如下所示：
第二种：绝对定位（position:absolute设置父盒子position:relative（相对定位，三个子盒子position：absolute,左盒子left:,右盒子right:;中间盒子left:px;right:px
第三种：flex布局父盒子display:flex左右盒子设置宽度：px中间盒子flex:(flex-grow:flex-shrink:flex-basis:%)不考虑元素尺寸自由伸缩
第四种：grid布局父盒子display:grid;grid-template-columns:pxautopx;(分割成列，宽度分别为pxautopx)grid-template-rows:px;(占一行，行高px)
九宫格布局方式有哪些，有什么优缺点
这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是：.背景介绍盒子模型与元素水平九宫格对于一个初学者来说，只需要了解标准盒模型，盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content,padding,margin，边框border则不可以用%单位。元素水平分为种：block水平，inline-block水平，inline水平，种元素各有不同的表现。??????block水平默认情况下，继承父级宽度，铺满整行。多个元素竖直方向排列，可以设置宽高，竖直方向上的padding,margin有效。???????inline元素水平排列，多个inline水平的元素，会在一行里排列，不可以设置宽高，竖直方向上的padding,margin无效。???????inline-block水平元素，用时具有block水平和inline水平的特点，多个元素水平排列成一行。可以设置宽高，竖直方向上的padding,margin有效。.知识剖析既然这样，实现九宫格效果，必然不能是个block水平的元素或者是个inline水平的元素，只能是inline-block的元素。?所以引出第一种九宫格布局。inline-block布局。固定尺寸的九宫格布局。关于九宫格的自适应，什么叫自适应，九宫格的自适应指的又是什么，认识css单位,px,%，与vw。px,%,vw的不同之处vw：viewpoint-width，视窗宽度，vw等于视窗宽度的%。vh：viewpoint-height，视窗高度，vh等于视窗高度的%。%:百分比，以父级元素的尺寸为基准，乘以%后得到相应的尺寸。既然这样就可以轻松的写出第一个九宫格展示图。b、float布局关于浮动float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。c、vw布局d、flex布局e、grid布局f、position布局g、line-height布局.常见问题display:inline-block后的九宫格会折行？.解决方案分析原因：解决办法：、父级设置font-size为、标签闭合.编码实战.扩展思考宫格必须使用个div吗？不一定直接看demo。个div实现宫格个div实现宫格.参考文献参考一：wc参考二：知乎.更多讨论讨论点：以上提到的九宫格布局实现方案，还有别的实现方案吗？????table布局方案，纯position定位方案?讨论点：选择哪种方案好？?????考虑兼容性的话float布局与inline-block布局最好，其他的布局方案或多或少不兼容低版本浏览器讨论点：初学者实现九宫格要注意的问题inline-block布局的问题，有必要清楚浮动吗？问题：.display:inline-block后的九宫格会折行？答：a、父级设置font-size为b、标签闭合.为什么绝对定位知识设置相对方向值，就能实现width或者height具有尺寸？答：这是绝对定位的特性，假如我们在一个相对定位的容器有一个子元素，我们直接设置这个子元素是绝对定位，然后设置left：;right:;top:;bottom:;此时子元素的宽度就是父级的宽度，子级的高度就是父级的高度，这就是绝对定位的特性，拉伸特性。.为什么九宫格布局不能使用height的百分比。答：Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。（即块级元素的宽度但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height:auto。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。因为父级元素的高度是由该元素里面的内容撑起的，在不设置该圆素高度的前提下。于是子元素的高度height:%也不会起作用。解决办法就是给html和body加上height:%。“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是技能树.IT修真院：“欢迎加IT交流群与大家一起讨论交流
Flex布局和Grid布局小游戏
最近发现了两个挺有意思的css小游戏,分别是学习flex布局和grid布局的,前一个叫FLEXBOXFROGGY,后者叫GridGarden,在线补齐css属性来通过关卡,也正好可以一边放松一边复习下相关的布局知识.
CSS布局：float、position、flex、grid
CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。CSS布局方式有很多，从远古时代的table（表格布局--》float（浮动布局--》position（定位布局--》flex（弹性布局--》grid（网格布局（还未正式推出，下面咱们简单谈一谈各种布局的用法及其优缺点。table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。如下图：这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。网页中最常见的布局如下：用float做比table布局要方便不少，不过float随之而来的带来了“浮动高度塌陷”的问题：如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为；引申：网页元素一般分为普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流》浮动流》普通流。之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。同样的效果不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用relative相对定位。还有fixed固定定位，他是以html为父元素的定位。flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。使用方法：在父元素使用display:flex;确定弹性作用的范围。然后justify-content：center（space-around，space-between等；水平方向布局；align-items:center(flex-start,flex-end等);垂直方向布局；不过flex不兼容IE及以下的浏览器。大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格布局就发展起来了。grid布局用法和flex相似，但是作用于二维布局。先在父元素使用display:grid;确定网格作用范围；然后grid-template-columns:pxpxautopxpx;（行grid-template-rows:%pxauto;（列等等属性，这里只简单介绍，大家了解有这个东西就行。在现实工作用，以flex为主，position辅助已经足够应对所有问题。
flex布局和grid布局
《divclass=“wrapper“》《divclass=“one“》One《/div》《divclass=“two“》Two《/div》《divclass=“three“》Three《/div》《divclass=“four“》Four《/div》《divclass=“five“》Five《/div》《divclass=“six“》Six《/div》《/div》css:.wrapper》div{border:pxsolidrgb(,,);border-radius:px;background-color:rgba(,,,.);padding:em;color:#df;}.wrapper{display:grid;grid-template-columns:repeat(,fr);grid-gap:px;//网格之间的间距grid-auto-rows:minmax(px,auto);}.one{grid-column:/;grid-row:;}.two{grid-column:/;//grid-column:x/y从第x列到y列，x表示从盒子的左边框是第一列到第x列grid-row:/;//grid-row:x/y从第x行到y行，x表示从盒子的上边框是第一列到第x列}.three{grid-row:/;grid-column:;}.four{grid-column:;grid-row:;}.five{grid-column:;grid-row:;}.six{grid-column:;grid-row:;}grid-cloumn:表示标签在网格的第几列grid-row:表示标签在网格的第几行。
页面布局有几种方法，flex布局优缺点
静态布局：传统布局，屏幕宽高变化时，盒子使用横向或者竖向的滚动条来查看被遮挡部分，也就是不管浏览器窗口的大小怎么变化就按html语义标签排列的布局来布置。.弹性布局：css引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie及以上；.自适应布局：分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。.流式布局：页面元素的宽度按照屏幕进行适配调整，元素的位置不变，大小变化，屏幕太大或者太小导致元素不能正常显示。.响应式布局：《metaname=“viewport“content=“divice-width,initial-scale=.,minimum-scale=.,maximum-scale=.,user-scalable=no“》使用meta标签设置，页面元素宽度随窗口调整自动适配。主要属性及其含义如下：name=“viewport“：??名称=视图；width=device-width页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)；initial-scale?-?初始的缩放比例?；minimum-scale?-?允许用户缩放到的最小比例??；maximum-scale?-?允许用户缩放到的最大比例?；user-scalable?-?用户是否可以手动缩放?。.网格布局：grid二维布局系统，随意的定义每行每列的数目和大小。也非常简单方便，兼容性较差。