Flex布局笔记

Lin_YT 发布于2019-08-29 17:00 / 1688人阅读

摘要：布局教程地址控制换行属性控制轴线的方向行行反转列列反转主轴线的对齐开始对齐结束对齐居中两端水平分布等间距分布交错轴线的对齐开始对齐结束对齐居中沿着他们自己的基线对齐与行高有关默认值所有容器一样高默认的

Flex布局教程地址
https://www.youtube.com/watch...
https://paper.dropbox.com/doc...
https://www.w3cplus.com/css3/...

控制换行属性

flex-wrap: wrap | nowrap | wrap-reverse；

flex-direction 控制轴线的方向
flex-direction: row | row-reverse | column | column-reverse;

           行     行反转      列        列反转

·justify-content:
Main-Axis, 主轴线的对齐
justify-content: flex-start | flex-end | center | space-between | space-around;

           开始对齐  结束对齐   居中   两端水平分布     等间距分布

·align-items：
Cross-Axis, 交错轴线的对齐
align-items: flex-start | flex-end | center | baseline | stretch;

         开始对齐   结束对齐     居中     沿着他们自己的基线对齐,与行高有关     默认值,所有容器一样高

align-items: baseline；

align-items: center;

默认的Main-Axis方向是从左到右，Cross-Axis方向是从上到下吧？

当用 flex-direction: column 时，Main-Axis和Cross-Axis会向如下所看到的那样改变：
flex-direction: column
align-item: felx-end;

flex速记

flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）

li { flex: 0 1 auto; }

上面的代码相当于：

li { flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto; }

让文字居中
除了text-align: center; line-height; 的方法外，还可用flex方法：

.four li{
    display: flex;
    justify-content: center;
    align-items: center;
}

让flex项固定宽度,不跟随内容自动伸展

设置flex项的宽度为0即可（貌似不兼容firefox）
.wrap{
　　display:flex;
}
.wrap .item{
　　flex:1;
　　width:0px;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114036.html

笔记：flex 的完备性与正交性

摘要：笔记布局很容易与其他布局方式包括布局嵌套在一起，实际上它是一个独立的盒子，这个盒子由一个元素称为容器及其直接的子元素称为项目构成。这个容器外部以及这些项目内部都不会受布局的影响。笔记： flex 布局很容易与其他布局方式（包括 flex 布局）嵌套在一起，实际上它是一个独立的盒子，这个盒子由一个元素（称为容器）及其直接的子元素（称为项目）构成。这个容器外部以及这些项目内部都不会受 f...

MingjunYang 2019-08-29 13:46 评论0 收藏0
Flex布局语法笔记

摘要：布局的传统解决方案，基于盒状模型，依赖属性属性属性。一基础和术语布局是啥是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。基本概念采用布局的元素，称为容器，简称容器。该属性的个值分别表示具体对齐方式与轴的方向有关。网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + floa...

legendmohe 2019-08-30 11:02 评论0 收藏0
CSS页面布局笔记

摘要：居中布局水平居中父元素和子元素的宽度都未知优点兼容性好缺点子元素文本继承了属性，子元素要额外加优点只需要设置子元素的样式优点居中子元素不会对其他元素产生影响缺点是的属性，存在兼容性问题优点只需要设置父元素的样式缺点兼容性问居中布局水平居中父元素和子元素的宽度都未知 inline-block + text-ailgn .child{display:inline-block;} ...

CoderDock 2019-08-28 18:14 评论0 收藏0
CSS 小结笔记之伸缩布局 (flex)

摘要：相关的各个属性如下在父盒子定义，子盒子才能使用属性设置子盒子的缩放比例，可以一起指定也可以单独指定。子盒子在父盒子中的水平对齐方式。强行在一行显示，因此每个盒子的大小都会减少。CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。 flex 为和模型布局提...

番茄西红柿 2019-04-23 13:22 评论0 收藏0
CSS || flex笔记

摘要：五个取值与主轴方向有关默认值左对齐右对齐居中两端对其，间的间隔距离相等每个两侧的间隔相等，相当于设置左右值相等。默认值为即使存在剩余空间宽度，也不放大。默认值为，表示本来的大小。 Flex布局 Flex是flexible box的简称，纯粹用来布局的属性 1 flex和inline-flex 任何容器都可以知道为Flex布局，块级元素使用display: flex; ；行内元素使用i...

huhud 2019-08-29 12:16 评论0 收藏0