文字的基线对齐 , 上面图片与边框之间的风险 , 就是基线与底线之间的距离 ; 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) ---- 使用 vertical-align...的 其它三种对齐方式 居中对齐 / 顶部对齐 / 底部对齐 , 都可以解决该问题 ; 代码示例 : <!...; } .three { /* 顶线对齐 - 图片顶部与文字顶线对齐 顶部对齐*/ vertical-align: top; } .four { /* 底线对齐 - 图片底部与文字底线对齐... 顶线对齐 : 图片顶部与文字顶线对齐 <img...图片底部有一块缝隙 , 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐
Center 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 End 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。...SpaceBetween Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。...Baseline 元素在Flex容器中，交叉轴方向文本基线对齐。 FlexDirection 名称 描述 Row 主轴与行方向一致作为布局模式。...FlexWrap 名称 描述 NoWrap Flex容器的元素单行/列布局，子项不允许超出容器。 Wrap Flex容器的元素多行/列排布，子项允许超出容器。...WrapReverse Flex容器的元素反向多行/列排布，子项允许超出容器。 VerticalAlign 名称 描述 Top 顶部对齐。 Center 居中对齐，默认对齐方式。
一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...与父容器或其它容器无关 */ position: fixed; 然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ; /* 固定定位盒子位置紧贴顶部 */...top: 0; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ; /* 将固定定位的盒子在页面中居中对齐..., 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ; Flex 子项目的 flex 样式默认都为 0 , 只要有一个子项目设置了 flex...display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */ position: fixed; /* 固定定位盒子位置紧贴顶部
前提 假设主项目是MAIN_APP，两个子项目是FRAMEWORK_A和FRAMEWORK_B。
CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。 在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...因为 Flex 容器会默认： 把子项排成一行； 让子项与其内容等宽，并 —— 把所有子项的高度拉平为最高子项的高度。 我们可以用 align-items 属性来控制垂直方向的对齐方式。....tweet { display: flex; align-items: flex-start; } align-items 的默认值是 stretch，而将其设为 flex-start 后，会让子项沿着容器顶部对齐...一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉，每个富文本编辑器顶部都有这种功能的按钮： ? 它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”，也就是铺满整行。...设置了 flex-direction: row（默认值，也是本文中一直在用的设置）后，可以通过 justify-content 把子项进行或左或右地对齐。
: 子项目沿主轴均匀分布，位于首尾两端的子项目与父容器相切 image.png align-items 属性定义子项目沿着交叉轴方向具体如何排列 flex-start: 起始端对齐 image.png...以一开始是起始端对齐为例，cross-strat 到各个子项目基线的距离可能各不相同，一旦设置了基线对齐，则：距离最大的那个子项目保持与 corss-start 相切，其他子项目的基线均向该项目的基线对齐...align-content 属性定义子项目存在多行时，行与行之间的对齐方式 flex-start：起始端对齐 image.png flex-end：末尾端对齐 image.png center：居中对齐...image.png flex-grow 属性定义了父容器还有剩余空间时，子项目如何瓜分这些剩余空间。 其值为一个权重（扩张因子），子项目将按照设定的这个权重去瓜分父容器的剩余空间。...，它的可选值与 align-items 的可选值完全一致，两者同时设置时将优先考虑 align-self。
弹性布局实现 ; 将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式 , 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航栏样式 */ .local-nav...弹性布局 */ display: flex; /* 主轴设置为 y 轴 */ flex-direction: column; /* 水平方向居中对齐 , 即 侧轴方向...设置列表的默认样式 */ margin: 0; padding: 0; /* 去掉小圆点 */ list-style: none; } img { /* 图片与文字对齐样式...默认是与文字基线对齐 */ vertical-align: middle; } div { /* css3 盒子模型 */ box-sizing: border-box; }...display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */ position: fixed; /* 固定定位盒子位置紧贴顶部
flex布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至是循序），以最佳的方式来填充keys空间（其主旨是适应所有类型的显示设备）。 那么，什么是容器，什么又是项目。...假设N个项目的字体大小不同，那么字体所占用的空间也不一样，该属性会令N个项目的第一行文字顶部对齐 stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。...看效果我们可以看出项目1的上边框和项目2的文字顶部也就是“2”的最顶部是对齐的 6.align-content属性介绍 该属性定义了多根轴线（多行）的对齐方式。...flex-end 交叉轴居底对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。...，默认为1，即如果空间不足，该项目将缩小。
，它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode; 确立的方向（从左到右、从右到左，等等）order 属性，将元素与序号关联起来，以此决定哪些元素先出现。...10 个子项，将 10 个子项都排在一行，会导致溢出 flex 容器所以我们在父级添加了 flex-wrap 属性，指定 flex 元素单行显示还是多行显示，默认不换行，值为 nowrap，指定容器多行显示...属性，定义子项的排列方向，默认是水平方向 row，竖直方向为 column取值子项排列方式rowflex 容器的 main 轴与行内轴方向作为默认的书写模式，即横向从左到右排列（左对齐）row-reverse...容器的 main 轴方向上的对齐方式值描述flex-start从行首开始排列，每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐flex-end从行尾开始排列，每行最后一个弹性元素与行尾对齐...如果弹性盒元素的行内轴与 cross 轴为同一条，则该值与 "flex-start" 等效其它情况下，该值将参与基线对齐stretch元素被拉伸到与容器相同的高度或宽度#main { width: 500px
元素、块级元素的文字内容 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐 四....start 对齐 flex-end:与 main end 对齐 center:居中对齐 space-between: ✓ flex items 之间的距离相等 ✓ 与 main start、main...axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container flex-start:与 cross start 对齐 flex-end:与 cross end 对齐...center:居中对齐 baseline:与基准线对齐 align-content align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content...类似 stretch(默认值):与 align-items 的 stretch 类似 flex-start:与 cross start 对齐 flex-end:与 cross end 对齐 center
每行第一个元素与行首对齐，每行最后一个元素与行尾对齐 space-around和space-between类似，但是每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半...，则各个子项根据自己的大小缩放来撑满容器，如果子项和的最小宽度大于容器，则会撑开容器，如果和小于容器则相当于flex-start flex-start从行首开始排列。...每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐 flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐 center伸缩元素向每行中点排列。...一共有 6 个常用属性： flex-start与交叉轴的起点对齐 flex-end与交叉轴的终点对齐 center与交叉轴的中点对齐 space-between与交叉轴两端对齐，轴线之间的间隔平均分布...flex-grow 定义弹性盒子项（flex item）的拉伸因子，将相对于同一行上所有其他项目的大小总和进行缩放，这些项目将根据指定的值自动调整。它的值是number，负数无效。
，任何一个容器都可以指定为 flex 布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。...flex-direction 和 flex-wrap flex-direction 设置主轴的方向: 主轴与侧轴: 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ：行和列、x 轴和y...默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头，...再平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content 和 align-items 区别: align-items 适用于单行情况下， 只有上对齐、下对齐、居中和...: flex 属性定义子项目分配剩余空间，用flex来表示占多少份数 .item { flex: ; /* default 0 */ } align-self 控制子项自己在侧轴上的排列方式
决定子项的对齐方式(主轴)，默认为start 可选属性 含义 center 居中对齐 end 结尾对齐 spaceAround 使每个子项占的空间一样大 spaceBetween 两端对齐 spaceEvenly...可选属性 含义 center 居中对齐 end 结尾对齐 stretch 使子项充满这个轴 baseline 子项的准线和交叉轴对齐（前提是对应的子项有准线，比如Text） start 开头对齐...rtl 从右往左← ltr 从左往右→（默认） List children 这是一个用来装子项的数组 布局规则 如果子项是可伸展的（被Expanded包裹），则会按照它的灵活系数（flex...）进行分布，例如：在Row中，flex系数为2.0的子项宽度将会是flex系数为1.0的宽度的二倍。...Row的高度会和子项的的最大高度相同 Row的宽度和mainAxisSize有关，具体情况请看上面表格 子项的具体位置和mainAxisSize与crossAxisAlignment相互左右有关 子项如果是可伸缩的
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。 ?...space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。 ? space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。 ?...当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了。 如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。...4. flex-shrink: 定义了项目的缩小比例 .item { flex-shrink: ;} 默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。 ?...另外感谢 @王嘉成 在评论区的补充说明容器的 flex-wrap 与子项的 flex-shrink、flex-grow 之间的关系： 当 flex-wrap 为 wrap | wrap-reverse
当我们为父盒子设为flex布局以后，子元素的float、vertical-align数据将失效。...flex-direction设置主轴的方向 2.2.1 主轴与侧轴 默认主轴方向：X轴 = 水平 默认侧轴方向：Y轴 = 竖向向下 属性值 说明 row 默认值从左到右 row-reverse 从右到左...设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式，并且只能用于子项出现 换行 的情况（多行） 图片 属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列...、下对齐、居中和拉伸 align-content适应于换行（多行）情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉升以及平均分配剩余空间等属性值。...flex 属性 定义子项目分配剩余空间，用flex来表示占多少份数。
css基础教程之flex布局 一、display:flex; 二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置 flex-direction...即横向从左到右排列（左对齐）。 row-reverse：对齐方式与row相反。 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。...column-reverse：对齐方式与column相反。...不允许负值 auto：无特定宽度值，取决于其它属性值 content 基于内容自动计算宽度 四、align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。...该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse 反转 wrap 排列。
设置 某个子项目元素 与 其它子项目 排列方式不同 ; align-self 取值 : align-self 样式 可以覆盖 父容器中 align-items 的设置 ; align-self 默认值为...div span:nth-child(2) { /* 将 2 号子元素设置为 下对齐 */ align-self: flex-end; }...样式 , 将 div 下的 第 2 个 span 的侧轴排列方式设置成 align-self: flex-end; 样式 ; 代码示例 : div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display:...2 号子元素设置为 下对齐 */ align-self: flex-end; }
3 animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3 animation-duration 检索或设置对象动画的持续时间...设置对象顶部边框的特性。 1 border-top-color 设置或检索对象的顶部边框颜色 1 border-top-style 设置或检索对象的顶部边框样式。...3 flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 3 flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。...3 align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 3 align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。...内容生成属性(Generated Content Properties) 属性 描述 CSS content 与 :before 以及 :after 伪元素配合使用，来插入生成内容 2
1 flex布局 1.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差...：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap 1.3.1 flex-direction设置主轴的方向 主轴与侧轴...子项在侧轴西安分部在两头，在平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content和align-items区别 align-items适用于单行情况下，只有上对齐...、下对齐、居中和拉伸 align-content适用于换行（多行）情况下（单行情况下无效），可设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值 1.3.6 flex-flow flex-flow...flex布局子项常见属性 1.4.1 flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 可为数字，也可为百分比，百分比相对于父级来说 1.4.2align-self控制子项自己在侧轴上的排列方式
布局 6.2.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差...设置主轴的方向 主轴与侧轴 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和y轴 默认主轴方向就是x轴方向，水平向右 默认侧轴方向就是y轴方向，水平向下 属性值 flex-direction...子项在侧轴西安分部在两头，在平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content和align-items区别 align-items适用于单行情况下，只有上对齐...、下对齐、居中和拉伸 align-content适用于换行（多行）情况下（单行情况下无效），可设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值 6.2.3.6 flex-flow flex-flow...flex布局子项常见属性 6.2.4.1flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 可为数字，也可为百分比，百分比相对于父级来说 6.2.4.2align-self控制子项自己在侧轴上的排列方式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
