可以看到，我们现在用的最多的Flex布局的浏览器兼容性已经达到了一个非常高的比例——95%，说明在如今的前端开发环境下，如果对浏览器要求不是非常苛刻，基本可以非常愉快的使用Flex布局了。...Grid和Flex对比 Grid与Flex布局的共同点是元素均存放在一个父级容器内，尺寸与位置受容器影响。...内容优先 vs 布局优先 再者，其实这两种布局方式的另一个核心区别是Flex是以内容为基础，而Grid是以布局为基础，听起来有些抽象，我们来用一个实际的例子来看一下。...值得注意的是，让元素本身决定他放在哪里，我们除了display: flex之外没有添加任何东西。 这就是Flex和Grid的核心差别，当我们使用Grid来创建这个header时，这个差别会更加明显。...网格容器（grid-container） 网格容器，类似于Flex的容器，我们可以通过添加display: grid将一个元素设置成一个网格容器。
定义一个容器 在开始使用flexbox，你需要定义一个容器div或一个父容器，在div中包括所有子元素，如下所示： div class="container"> div>1div> div...>2div> div>3div> div> div通过将display属性设置为flex，可以使父项或容器变得灵活： .container { display: flex; background-color...包含三个div的红色容器 如你所见，通过将display属性设置为flex，容器的子元素将自动变为弹性项目。...flex-direction属性 flex-direction属性定义容器要在哪个（列或行）方向上堆叠弹性。 下面的示例将flex-direction设置为column（从上到下）。...我建议你将下面的代码放在文本编辑器或Codepen中，并调整浏览器窗口的大小以查看的功能flex-wrap。
默认情况下，Flexbox 将项目在行的方向排列。...在这种情况下，默认情况下，Flexbox 会缩小弹性项目以适应容器。为了允许换行，可以使用 flex-wrap 属性进行设置。 nowrap（默认值）：所有项目在单行中显示。...示例：使用 flex-flow .container { display: flex; flex-flow: row wrap; /* 水平排列并允许换行 */ } 通过这种方式，容器内的项目将水平排列并且在不足容纳时自动换行...十一、Flex 嵌套 在实际开发中，我们经常需要将一个弹性盒子嵌套在另一个弹性盒子内。这样可以实现复杂的布局。...*/ flex-direction: column; /* 垂直排列 */ } 通过在容器内嵌套另一个弹性容器，我们可以得到更复杂的布局。
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。...、table-cell等 BFC作用 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。...:0 right:0 中间margin:0 宽 父元素display:flex;中间元素flex:1;（flex） 表格布局:父元素display:table;width:100% 所有子元素...：display:table-cell calc布局：全部float:left .main:calc(100% - 两宽度) 使用calc符号两边一定要有空格 7....与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。
>这是一个块级元素divdiv> 这是一个段落元素p div>这是另一个块级元素divdiv> 运行结果： 行内元素（如 这是一个链接元素a 这是另一个行内元素span 运行结果： 1.2...margin: 5px; } div>将块级元素div显示为行内元素div> div>这是另一个同样显示为行内元素的...Flexbox 通过将容器元素设置为display:flex，使其内部的子元素可以按照弹性规则进行排列。...项目在弹性容器内垂直排列，从上到下依次分布。
---- myspace 蓝湖UI设计图 整体的布局就是这样一个 Header，一个 sider，还有内容 content，我们要关心的就是 content 区域。...， 然后左边的部分再分上下两部分 ，全部使用 flex 做自适应。...codePage 蓝湖UI设计图 设计图展示划分如下 Header 通用 Sider 通用 Content 自定义 Content区域规划 由于面包屑展示形式不一致，计划放在页面单独管理，所以把面包屑放在...box 区域 划分成 左， 中 ，右 三个部分，其中右部分再细分为 上 下 两个部分。...: flex; flex-wrap: nowrap; justify-content: space-between; .left { display: flex; margin-right
举个简单的例子： div> 这是一个段落。 这是另一个段落。 div> 两个段落都是块级元素，它们会按照正常流的规则垂直排列。...通过设置display: flex;，你可以将一个容器变成弹性容器（Flex container），而其内部的子元素则成为弹性项（Flex items）。 1....设置 display: flex; 将父元素设置为display: flex;后，子元素将自动按照水平（默认）或垂直方向排列，并且能够灵活调整大小以适应容器。...，因为默认情况下flex-direction是row。...div style="column-count: 3; column-gap: 20px;"> 这是一个多列布局的示例。通过使用CSS的多列布局属性，我们可以将内容分为多个列。
除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。....cards { display: flex; flex-wrap: wrap} 如果你还记得上一个例子， flex-wrap 可以让 flex-items 元素换行。...使用 Flexbox 如下布局： .card { flex: 0 0 250px} 这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px...卡片首部对齐 这有时可能满足你的使用需求，但大部分情况下，都不行。 Flex 容器的默认值 上面的布局效果是由于 Flex 容器的默认布局设置。...一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里 你可以在这里查看最终的布局效果。
写在标签的开始标签里 在开始的标签里写style=“ ” div style="width:100px;height:100px;">div> 什么时候使用：只有这么一个标签需要这个样式的时候...，另一个是border-box。...flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。...一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。...39、z-index属性在什么情况下会失效 通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。
为 row，则主轴是水平方向，如果是 column，则主轴是垂直方向 [vbx2puz3kw.jpeg] flex 属性 将任意元素的 display 属性设置为 flex，可将其转换为Flex容器...设为 flex 容器后，子元素的 float、clear 和 vertical-align 属性将失效 flex 容器属性 属性名描述 属性名 参数 主轴方向 flex-direction row（水平排列...，并不是所有的浏览器、webview、微信等各种版本都支持标准的 flex，但是基本上都会支持-webkit-box，所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的...由于 flex.css 采用了 autoprefixer 编译，所以能够保证在浏览器不支持标准 flex 布局的情况下，回滚到旧版本的-webkit-box，保证移动设备中能呈现出一样的布局效果 于是，...分散对齐div>div> div> ```html ### 无限嵌套 栅格可以无限嵌套在另一个栅格中 div data-flex="gutter"> div data-cell>
div 之下，这是因为发生了重叠： 我们可以使用样式 clear:both; 清除浮动重新进行布局： 效果如下： 二、盒子模型 在网页中，我们将所有元素都看成是一个盒子，那么这就是盒子模型...在盒子模型中还有一个属性box-sizing，box-sizing有两个值，一个是默认状态下的content-box，另一个是border-box；这两者的区别为，默认状态下为 content-box...三、弹性盒子 弹性盒子是为了在原有布局上增加更大的灵活性，弹性布局使用属性 display 设置，其值为 flex。...div> 以上代码创建了两个样式，一个是 flex 另一个是 box，当然 flex 中暂时并未设置弹性布局，在此留着备用，接下来的 box 设置了基础的宽高...，我们此时可以看到以上示例的呈现效果如下： 接着我们在 flex 样式中增加 display: flex; 样式修饰，将布局变成伸缩布局 ，呈现如下： 此时这些 div 变成了横轴显示
边距折叠 简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。 在这种情况下，将使用较大的边距，而忽略另一个边距。...在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。 具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。...在这种情况下，我更喜欢为元素添加一个margin-right，这样可以防止它们相互接触，这将使flex-wrap 工作得更快。...我们将内联样式div设置为width ：16px， 它的唯一目的是在左边缘和包装器之间添加一个空间。...Flex> Flex> 使用伪元素 我想到的另一个想法是使用伪元素来创建间隔。
displsy:inline-block让元素变为内联块级元素内联块级元素的特点：不独占一行，而且对宽高支持存在问题：浏览器会把元素之间的换行，空格都当作空格处理，使用display:inline-block...">div>2.对文字大小进行处理，给使用display:inline-block的父级元素，添加font-size=0,并且该元素要设置有效的文字大小*{ padding: 0; margin...class="right">rightdiv> div> div class="bottom">div>1.flex-direction设置弹性盒子内，子元素的排列方向flex-direction...; }flex-start 元素都在左边/上边 代表元素在排列方向的开始位置分布flex-end 元素在排列方向上的结束位置分布（右/下）center元素在排列方向的中间位置分布space-between...所有行都靠近顶部或左端flex-end 所有行都靠近底端或右端center所有行居中显示space-between空白元素放在行和行之间space-around 空白元素平均放在行的上下两册space-evenly
我在上一篇博文CSS 布局_2 Flex弹性盒里，对 Flex 弹性盒有着详细的介绍，这里就不再复述了，书写页面前，我们先来介绍一个之前没提到的知识点——伪类选择器 伪类选择器 :hover 伪类选择器...IE6 下只能给 a 元素添加该伪类；b....，当括号里面是公式的时候，要记得把减号项放在前面，如 li:nth-of-type(-2n+8)，放在后面是不会生效的，如 li:nth-of-type(8-2n) :nth-of-type(n) 选择器...: red; } .item-box { display: flex; } .item-box div { flex: 1; background-color...(Hue)、饱和度 (Saturation)、亮度 (Lightness)，这是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法，还有一个参数是 A，表示的是透明度 (Alpha)，这个参数也可以使用到
margin 折叠 简而言之，当两个垂直元素具有margin，并且其中一个元素的margin大于另一个元素时，发生边距折叠。在这种情况下，将使用更大的margin，而另一个将被忽略。 ?...在上面的模型中，一个元素有 margin-bottom，另一个元素有 margin-top，边距较大的元素获胜。 为避免此类问题，建议按照本文使用单向边距。...另一个与边距折叠相关的例子是子节点和父节点。...在这种情况下，我倾向于向元素添加一个 margin-right，这样可以防止它们相互接触，从而加快 flex-wrap 的工作速度。 ?...Flex> Flex> 使用伪元素 我考虑过的另一个想法是使用伪元素创建间隔符。
display: flex; display: inline-flex; } ---- 1.改变items流动方向（主轴）  .container{ flex-direction: row...center:居中 space-between:将空间放在元素中间 space-around:将空间环绕元素 space-evenly:将空间，平均的环绕元素 }       -...当没有配width的时候可以使用。 ---- 5.flex缩写 flex:flex-grow flex-shrink flex-basis 缩写，空格隔开 div> div> .container{ display: flex; border: 1px solid red; flex-direction...     flex常用套路 使用flex，重写之前的float页面 <!
首先说一下怎么使用，我知道很多的文章都介绍了，说的也很明白，其实我写这篇文章的意义在于自己可以更加清楚的知道每一个属性的用法，毕竟别人的东西不可以按照我的思路来，另一个意义在于和我想的一样的人可以看到这篇文章...指定Flex布局直接这样写： .box{ display: flex; } 如果是行内元素使用也是可以的： .box{ display: inline-flex; } Webkit内核的浏览器，...下面我们分别说 要想明白Flex怎么回事，首先要明白几个概念，第一叫做容器，第二叫做项目，第三个叫做主轴，最后一个是交叉轴 首先我们说一下什么是容器？...，只是为了每一个都用代码写一下，看看有没有什么存在的问题，然后将思路捋一下。...之前的时候我们一般是写@media处理一下这个，但是现在使用这个的话，只需要一个属性就搞定了，简直是神技了。 ps：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
div> 我将所有链接放在页眉的导航标签中。...因此，这是一个非常简单的标记。通常情况下，导航应该在第一个和最后一个项之间居中对齐。 根据我的观察，这个问题已经成为前端社区中的新问题，类似于“居中一个div”的问题。...下面是如何实现的方法： header > nav { display: flex; } header > nav > * { display: flex; } header > nav >...首先，我使用的选择器过于具体化。这样做是为了使嵌套关系更加清晰。 然后，页眉下的每个元素都是一个弹性容器。这也是不必要的。目前，它仅用于导航的最后一个子元素，以将其子元素移动到右侧。...这只留下了这条规则：flex: 1 1 0; 这是我们在这里的主要关注点。我将这条规则应用于第一个和最后一个元素。它允许它们增长和收缩，并将它们的基准大小设置为0像素。
双飞翼布局的核心思想是通过浮动和边距技术将中间内容区域放在最前面，左右侧边栏紧随其后，同时在中间内容区域内部嵌套一个.inner元素，以确保主要内容不被左右侧边栏覆盖。...弹性容器：设置display: flex使容器成为弹性容器。 弹性子元素：使用flex属性使子元素在弹性容器中调整其占用空间。 顺序控制： 使用order属性让子元素在弹性容器中调整其位置。...order: 2; } 将容器.page设为弹性容器 使用flex: 1使中间内容区域根据需要伸缩，占据弹性容器的剩余空间 使用order属性将三个板块按顺序排序，order的初始值为0 ，所以我们只需要设置中间部分和右边的广告位...我们可以看到在html的设计时我们会将主要内容放在前面，根据html从上到下解析的顺序，会优先加载主要内容，更加服务于用户的体验。...网格容器：使用display: grid将容器设为网格容器。 网格模板：使用grid-template-columns定义网格列的大小和数量。 自动布局：自动将子元素按网格排列。
> 上面 div 的行为默认遵循正常的 html 文档流，因此从上到下、从左到右进行渲染，并且会占据整个 body 的宽度，因为它们的 display 属性默认是 block。...弹性容器 display: flex 使容器拓展整个可用宽度；与之相对的，display: inline-flex 使容器宽度塌陷至与内容宽度相等。 ?...默认值是 row，它将主轴设置为从左到右的水平方向，而交叉轴从上到下与之垂直相交。同理，column 将主轴设置为从上到下的垂直方向，而交叉轴则是从左到右。...假如我们没有设置 100vh，则容器高度将等于项目内容的高度，如下图所示 [1]： ? 另一个选项是 wrap-reverse，它将会反转交叉轴。...默认值是 0，这意味着如果有剩余空间，就把这个空间放在最后一个项目的后面 [1]。 ? 在上面的例子中，direction 设置为 row，每个弹性项目的宽度是 60px。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
