天道酬勤,学无止境

你必须知道的flex伸缩布局

伸缩布局:
display:flex;让大盒子成为容器,容器有主轴和侧轴;
子盒子是容器的项目,项目默认会从主轴的起点沿主轴的方向依次排列,如果超过容器,则会自动收缩,不换行 所以一定要注意当前主轴的起点在什么地方

容器的6个属性:写在容器的css里
—1---
flex-direction控制主轴的方向:
row→:默认值,主轴呈现水平方向从左往右
column↓:主轴呈现垂直方向从上往下,项目会垂直排列,侧轴会变成水平方向从右往左
row-reverse← 主轴呈现水平方向从右往左,项目的排列也会反过来
row:默认值,主轴呈现水平方向从左往右
column-reverse↑ 主轴呈现垂直方向从下往上,项目的排列也会反过来
—2---
justify-content: 控制项目在主轴的对齐方式,是项目整体对齐,不会颠倒项目的位置和次序
flex-start:以主轴的起点对齐
flex-end:以主轴的终点对齐
center:居中对齐
space-between 沿主轴两端对齐
space-round:环绕对齐,每个项目的左右间隙的距离相同
—3---
flex-wrap:控制项目是否换行
no-wrap不换行,默认值
wrap换行
wrap-reverse 反着换行。第一行在下面
—4---
flex-flow:默认值row nowrap,是flex-direction和flex-wrap两种属性的简写
—5---
align-items:控制项目在侧轴单行情况下的对齐方式,如果是多行,则不起作用
flex-start:侧轴的起点对齐,不是默认值
flex-end:侧轴的终点对齐
center:侧轴的中点对齐
没有两端对齐和围绕对齐,因为是单行
stretch:默认值,如果项目有height,该属性的拉伸效果没有,如果没有设置高度,则回让项目的高度和容器的高度保持一致
—6---
align-content:定义了多行在侧轴的对齐方式,如果项目是单行,则不起作用
flex-start:侧轴的起点对齐,不是默认值
flex-end:侧轴的终点对齐
center:侧轴的中点对齐,居中对齐
没有两端对齐和围绕对齐,因为是单行
space-between 沿侧轴两端对齐
space-round:环绕对齐,每个项目的上下间隙的距离相同
stretch:默认值,如果项目自身有高度,,则拉伸效果是没有的,但是排列的位置还是在轴线的最顶端

项目的属性:
—1---
order:设置项目间的排序
默认值是0,值越小,越靠前
—2---
flex-grow:定义项目的放大比例,
默认值是0,即使有剩余空间也不会放大
1,将剩余空间均分,
将项目的flex-grow属性值相加,就是将剩余空间分成几份,根据每个项目所设的flex-grow值,来判断每个项目在剩余空间里面占几份
—3---
flex-shrink:定义项目的缩小比例,
默认值是1 一旦超出容器,自动缩小
0 就是不缩小
负值对该属性无效
—4---
flex-basis:官方认证的宽度属性
默认值是auto
像素,百分比,设置多少,项目的宽度就是多少,就算项目本身设置了width,也没有效果,也就是比width的权重高
—5---
flex 是flex-grow、felx-shrink、flex-basis三者的简写
—6---
align-self:是对align-items的补充,允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性值和align-items一样

参考:阮一峰 flex布局教程

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用CSS3 Flexbox布局
    http://www.w3cplus.com/css3/css3-flexbox-layout.html 本文由大漠根据Helen Emerson的《Using the CSS3 flexbox layout》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://helephant.com/2013/03/23/css3-flexbox-layout,以及作者相关信息 ——作者:Helen Emerson ——译者:大漠 Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器(flex container)来辅助实现。 Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。 看看一些例子来了解Flexbox擅长哪种东西。 伸缩容器(flex containers)和伸缩项目(flex items) 一个Flexbox布局是由一个伸缩容器(flex containers
  • 弹性布局(伸缩布局)
    弹性布局 弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 使用方法:父元素设置display:flex 注意:父元素属性设置了flex布局其子元素的float,clear,vertical-align将无效 常用属性 1.flex-direction 调整子元素的排列方向(默认水平方向row)column(垂直) .main{ width:400px; height:300px; border:1px solid red; margin: 0 auto; display: flex; flex-direction:column;// } 2.justify-content:设置水平对齐) 值描述flex-start子元素左对齐flex-end子元素右对齐(不改变盒子顺序)center水平居中space-between左右的盒子贴近父盒子,中间的平均分布空白间距space-around每个盒子平均分配父元素留下的左右间距 space-between左右的盒子贴近父盒子,中间的平均分布空白间距 space-around每个盒子平均分配父元素留下的左右间距 2.align-items:调整侧轴对齐(设置单行垂直对齐) 值描述stretch默认,使子元素的高度拉伸填充父容器(在子元素不指定高度的情况)flex-start顶部对齐flex
  • 移动端开发常用布局2-弹性布局详细讲解
    各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什么是弹性布局? 弹性布局(flex container),页面中任何一个元素只要设置了display:flex属性,那么当前盒子都称为弹性盒子.弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴),在弹性盒子中所有的子元素都是沿着主轴方向显示. 二:什么情况下用弹性布局? ①: 以携程移动页面为例,在网页中当遇到需要将父元素按照奇数进行等分,比如携程中红色区域是将父元素3等分.如果用流式布局那么就需要设置33.33%.如果用弹性布局只需要给每一个子元素设置一个属性flex:1即可快速实现. ②:以淘宝网页为例,当我们需要页面中多个子元素快速实现在父元素中以左右距离适中显示的时候,这个时候我们不需要设置任何的px值,只需要给元素设置justify-content:space-around就可以实现 ③:以携程为例,当页面中出现子元素按照其他比例分割父元素的时候,依然可以通过弹性盒子中的flex实现快速实现.如图:红色区域是按照 2:1:2 和 2:1:1:1的比例显示. 如果咱们在写移动端页面(包括PC端页面)遇到以上几种情况的时候,弹性布局是最好的选择
  • 前端基础 - 移动端(Flex伸缩布局)
    移动端基础 浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。 总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。 手机屏幕的现状 移动端设备屏幕尺寸非常多,碎片化严重。Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。 移动端调试方法 Chrome DevTools(谷歌浏览器)的模拟手机调试搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器使用外网服务器,直接IP或域名访问 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 布局视口
  • 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
    弹性布局(flex布局、伸缩布局) 一、什么是弹性布局 flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局 注:当我们为父盒子设置弹性布局后,子元素的 float 、 clear 和 vertical-align 属性将失效 .box{ display: flex; } .box{ display: inline-flex; } /*Webkit 内核的浏览器,必须加上-webkit前缀。*/ .box{ display: -webkit-flex; /* Safari */ display: flex; } 二、布局原理 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 <style> div{ display: flex; width: 800px; height: 300px; background-color: green; justify-content: space-around; align-items: center; } div span{ width: 240px; height: 150px; background-color
  • web前端开发学习指南之弹性盒布局模型详细讲解
    零基础学前端学什么?下面就跟着小编一起来了解一下web前端开发学习指南,全方位了解弹性盒布局。 概念 弹性盒布局是css3引入的一种新的布局模式,也称为flexbox布局,即伸缩性布局盒模型,这种布局方式是用来提供一个更好的有效地方式制定、调整和分布一个容器里的项目布局,即使容器中的项目的尺寸未知或者是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的项目的尺寸和顺序来最好地填充所有可用空间。弹性盒布局是与方向无关的,在传统的布局方式中,block布局是把块在垂直方向从上到下依次排列,而inline布局则是在水平方向来排列,而弹性盒布局并没有这样内在的方向的限制,可以由开发者自由定义。 弹性盒布局中有两个互相垂直的坐标轴,一个是主轴,一个是侧轴。在未声明时,主轴默认方向是水平方向,侧轴是垂直方向,但是方向并不是固定的,可以通过css声明首先定义主轴的方向是水平还是垂直,从而侧轴的方向也能确定下来。 主要功能 1、 屏幕和浏览器窗口大小发生变化也可以灵活调整布局; 2、 制定伸缩项目沿着主轴或者侧轴按比例分配额外空间,从而调整伸缩项目的大小; 3、 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4、 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5、 控制元素在页面上的布局方向; 6、
  • css flex 弹性盒子布局
    css flex 弹性盒子布局 前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强。其强大的伸缩性和自适应性,在网页开中可以发挥极大的作用。 flex 布局 是加在父元素上面得,然后主轴和侧轴,相当于 x , y 轴(这句话要注意),但是有属性可以控制其转换,下面会有说明,所以 才会有 主轴 和 侧轴 得说法,并没有用 x , y 轴去定义。 flex 初体验 我们先来看看下面这个最简单的布局: 上面这张图中的布局是我们都熟悉的:默认文档流中,在一个父容器里放置多个块级的子元素,那么,这些子元素会默认从上往下排列。 在此基础之上,如果我给父容器仅仅加一个 display: flex属性,此时,这些子元素的布局会摇身一变: 没错,子元素们会在水平方向上,从左至右排列,就是这么神奇。到此为止,你已经掌握了关于 flex 的一半的知识。 flex 布局的优势 1、flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”。 但你如果用 float 来做布局,float 属性的元素会脱离文档流,而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题,比较麻烦,所以也成了面试必问的经典题目。但有了 flex 布局之后,这些问题都不存在的。 2、flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的
  • 弹性盒布局(flexbox)个人笔记
    弹性盒布局(flexbox) 一、弹性盒布局介绍 1)弹性盒也叫伸缩布局盒模型 它是**css3引入的一种新的布局模式——flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更便利于开发。 2)主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。 3)专业术语解释 a、主轴-水平方向或者X轴 b、侧轴-垂直方向或者Y轴 c、伸缩容器(父元素)和伸缩项目(子元素) 二、弹性盒属性 1)伸缩流方向 flex-direction 主要用来创建主轴,定义伸缩项目在伸缩容器中的方向 row:从左向右 row-reverse:与row相反 column:从上到下 column-reverse:与column相反 2)主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式 flex-start:伸缩项目向一行的起始位置靠齐 flex-end:伸缩项目向一行的结束位置靠齐 center:伸缩项目向一行的中间位置靠齐 space-between:伸缩项目会平均的分布在行里 space-around:伸缩项目会平均的分布在行里,两端保留一半的空间
  • 多列实现瀑布流文档
    主要内容 1.Css3盒模型 2.Css3弹性盒模型 3.多列布局 CSS3盒模型 怪异盒模型(ie8以下) 一、css3增加了盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式。 box-sizing:content-box border-box inherit content-box(css2) 元素的宽 = width + padding + border border-box(css3) 元素的宽 = width(包含padding和border) 二、伸缩布局盒模型 css3引入一种新的布局模式——flexbox布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者动态的。 主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex 使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。 flexbox布局功能主要具有以下几点: 1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局; 2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间,从而调增伸缩项目的大小; 3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5
  • 移动WEB-flex弹性布局
    1. 概述 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩 性,在响应式开中可以发挥极大的作用。别名:伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 2. 布局原理 flex 是 flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以 指定为 flex 布局,不需要转换盒子类型采用了 flex布局 的元素,称为flex容器,它的子元素称为flex项目总结flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 3. 注意 当我们为父元素设为 flex 布局以后,子元素的float、clear、vertical-align属性将失效flex布局没有外边距合并flex布局,分配剩余空间分配的是内容盒,剩余空间会先减掉盒子的border、padding 再分配。所以当 子元素均分剩余空间的时候,它们相等的是内容盒,如果有的盒子设置了边框、内边距,那它整体盒子 就会比其它盒子大 4. 语法 display:flex; /*在父级盒子中申明伸缩布局*/ 5. 父元素的属性 1. 设置主轴的方向(默认水平) flex
  • CSS3-弹性布局
    学习要点 掌握传统布局与CSS3新增弹性布局方式的实现和应用 弹性布局(弹性伸缩布局) 事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局。 比较新的布局方式:旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。 优点: 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。 对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。 缺点: 需要花更多时间理解和测试,让布局适合所有用户。 这种布局类型相对于其他两个更难制作 弹性布局属性: display: flex | inline-flex; (适用于父类容器元素上) box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本) inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本) inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本) flex:将对象作为弹性伸缩盒显示。 inline-flex:将对象作为内联块级弹性伸缩盒显示。 float, clear and
  • 我如何取消保证金? [复制](How do I uncollapse a margin? [duplicate])
    问题 这个问题已经在这里有了答案: 如何禁用保证金倒闭? (10个回答) 1年前关闭。 CSS中的折叠边距:http://www.w3.org/TR/CSS21/box.html#collapsing-margins 我了解该功能的用途,但是我正在尝试进行布局,因此我不知道如何将其关闭。 CSS教程中通常解释的方法是: 添加边框添加填充 当您处理带有背景图像和固定填充的像素完美布局时,所有这些副作用都会变得很明显。 有什么方法可以简单地禁用折叠而不用将多余的像素推入布局中吗? 对于我来说,必须以视觉方式影响文档以更改这种行为对我来说没有任何意义。 回答1 好吧,您需要在两者之间有一些东西来“破坏”崩溃。 我的第一个想法是使用div和display:none之间的设置,但这似乎不起作用。 所以我尝试了: <div style="overflow: hidden; height: 0px; width: 0px;">.</div> 这似乎做得很好(至少在firefox中,这里没有安装Internet Explorer进行测试...) <html> <body> <div style="margin: 100px;">.</div> <div style="overflow: hidden; height: 0px; width: 0px;">.</div> <div style=
  • 前端笔记(移动端)
    flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称“项目” 常见父项属性:flex-direction:设置主轴的方向;justify-content:设置主轴上的子元素排列方式;flex-wrap:设置子元素是否换行;align-content:设置侧轴上的子元素的排列方式(多行);align-items:设置侧轴上的子元素排列方式(单行);flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap; align-content 和 align-items 区别:align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸;align-content适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值;总结就是单行找align-items 多行找align-content;
  • 弹性布局(弹性伸缩布局)
    布局方式:提供一个更加有效的方式布置,对齐和分布在容器之间的各项内容,即使她们的大小是未知或者动态变化的。 主要思想:让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸的能力)。 优点:对用户十分友好,页面中放入所有元素可随用户的偏好缩放 流动和宽度布局(设计完美) 属性: 改变元素的分类 display:flex | inline-flex;(适用于父类容器上面) display:flex; 将对象作为弹性伸缩盒表示(开启弹性布局: 子元素自动填充) display:inline-flex; 将对象作为内联块级弹性伸缩盒表示 flex-flow(适用于父类容器上) flex-direction(适用于父类容器上面):设置或者检索伸缩盒对象的子元素在 父容器的位置 row:左对齐(默认)横向排列 column:纵向排列 row-reverse:反转横向排列 column-reverse:反转横向排列 flex-wrap(适用于父类容器上):设置或检索伸缩盒对象的子元素查过父容器时是否换行 nowrap:当子元素溢出父容器时不换行 wrap:溢出换行 wrap-reverse:溢出自动换行,方向同wrap反转排列 justify-content(适用于父类容器上面)设置或检索弹性盒子元素在主轴(x轴 横轴)方向上的对齐方式 如果有row
  • 移动端开发之常见布局
    流式布局(百分比布局) 流失布局,就是百分比布局,也称非固定像素布局通过将盒子的宽度设置成百分比,从而根据屏幕宽度来进行伸缩,不受固定像素的限制,内容向两侧填充制作过程中,需要定义页面的最大和最小支持宽度 max-width 最大宽度 ( max-height 最大高度)min-width 最小宽度 ( min-height 最小高度) flex布局 弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用flex布局的元素,称为flex容器,简称“容器”。它的所以子元素自动成为容器成员,称为flex项目,简称“项目”。flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排序方式特点 操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差,IE11或更低版本不支持或仅部分支持 常见属性 父项 flex-direction:设置主轴的方向 justify-content:设置主轴的子元素排列方式 flex-wrap:设置子元素是否换行 align-content:设置侧轴上的子元素的排列方式(多行) align-items:设置侧轴上的子元素的排列方式(单行) flex
  • HTML5 弹性布局
    弹性布局 弹性布局相关属性 flex-direction相关属性 flex-wrap相关属性 justify-content相关属性 align-items相关属性 align-content相关属性 样例Demo 弹性布局相关属性 属性说明display值为flex时, 创建弹性布局容器flex-direction伸缩流方向flex-wrap伸缩流换行flex-flow伸缩流(包括方向与换行),综合了flex direction和flex-wrap属性justify-content主轴对齐align-items侧轴对齐align-content堆栈伸缩行,只有在flex-wrap:wrap和wrap-reverse 设置下且伸缩项目存在多行时才生效flex用于设置或检索弹性模型对象的子元素如何分配空间,是flex-grow、flex-shrink和flex-basis属性的简写属性,即伸缩性。默认值是0 1. autoorder设置或检索弹性模型对象的子元素出现的顺序。默认值是0flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量,即扩展比率flex-shrink一个数字, 规定项目将相对于 其他灵活的项目进行收缩的量,即收缩比率。flex-basis项目的长度。合法值“auto”"inherit"或一个后跟“%”‘ px”“ em"或任何其他长度单位的数字
  • 在整个行/列中对齐网格项目(就像弹性项目一样)(Aligning grid items across the entire row/column (like flex items can))
    问题 使用flex容器和flex-wrap: wrap集,您可以使用justify-content: center将溢出的项目与中心justify-content: center 。 有没有一种方法可以使用CSS网格实现相同的行为,以使网格项溢出? 我创建了一支笔,显示了所需的弯曲行为 .container-flex { display: flex; flex-wrap: wrap; justify-content: center; } .container-flex .item { width: 33.33%; background: green; border: 1px solid; } .container-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .container-grid .item { background: red; border: 1px solid; } * { box-sizing: border-box; } <h3>Flex</h3> <div class="container-flex"> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div
  • flex布局(弹性布局、伸缩布局)
    flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。 主轴:默认水平向右(类似于X轴) 侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴) 主轴方向(flex-direction) 弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图: 取值效果(主轴方向)row水平向右(默认)row-reverse水平向左column垂直向下column-reverse垂直向上 主轴对齐方式(justify-content) 取值: flex-start:向主轴的开始位置对齐 flex-end:向主轴的结束位置对齐 center:居中对齐 space-around:让空白环绕盒子显示 space-between:让空白只在盒子之间显示 单行侧轴对齐方式(align-items) 取值 flex-start:向侧轴的开始位置对齐 flex-end:向侧轴的结束位置对齐 center:居中对齐 stretch:让子盒子的高度拉伸显示(默认值) 当盒子内的子元素没有高度时,会默认拉伸 是否换行(flex-wrap) flex布局中,默认是单行显示的,如果子元素的宽度之和超出了父元素的宽º
  • flex布局怎么实现宽度自适应?
    1、UI界面 页面分为两个部分,左右两格,当页面进行伸缩时,其宽度随着页面宽度自适应。 左右两格排列 给父元素div进行设置 display: flex; flex-flow: row wrap; // 以行排列 并且允许换行 align-content: flex-start; flex-flow 设置轴向与换行组合 是 flex-direction 和 flex-wrap 的简写。 所以只要掌握,flex-direction 和 flex-wrap即可。 两个盒子的宽度随着页面宽度自适应。为了实现这一功能,这里就要引入CSS3的calc()属性。calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。这个函数使我们能够计算CSS值,而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。 需要特别注意重要一点是+和-运算符必须用空格隔开,不然无法正常工作。*和/运算符不有这限制,但出于一致性的考虑,建议添加空格。 另外,很棒的是,我们可以混合CSS单位,例如,我们可以减去百分比和像素。 代码如下 给子元素设置 // 给奇数元素设置了右边距的情况下 test:nth-child(odd) { margin-right
  • 前端面试题整理(带答案--不定期更新)
    1、写出下面代码打印结果: function Foo() { Foo.a = function() { console.log(1) } this.a = function() { console.log(2) } } // 以上只是 Foo 的构建方法,没有产生实例,此刻也没有执行 Foo.prototype.a = function() { console.log(3) } // 现在在 Foo 上挂载了原型方法 a ,方法输出值为 3 Foo.a = function() { console.log(4) } // 现在在 Foo 上挂载了直接方法 a ,输出值为 4 Foo.a(); // 立刻执行了 Foo 上的 a 方法,也就是刚刚定义的,所以 // # 输出 4 let obj = new Foo(); /* 这里调用了 Foo 的构建方法。Foo 的构建方法主要做了两件事: 1. 将全局的 Foo 上的直接方法 a 替换为一个输出 1 的方法。 2. 在新对象上挂载直接方法 a ,输出值为 2。 */ obj.a(); // 因为有直接方法 a ,不需要去访问原型链,所以使用的是构建方法里所定义的 this.a, // # 输出 2 Foo.a(); // 构建方法里已经替换了全局 Foo 上的 a 方法,所以 // # 输出 1 //打印结果 //4 //2 /