一只菜鸟对于弹性布局的总结

B0B0 发布于2019-08-01 18:00 / 1544人阅读

摘要：它的所有子元素自动成为容器成员，称为项目，简称项目。容器有两个轴，一个水平主轴一个垂直交叉轴，起点终点都是容器的边界。为垂直交叉轴对齐方式，拥有的属性如下交叉轴的起点对齐。将占满整个容器的高度。

啥是弹性布局（问号脸）？以前盒子的布局都是使用position、float、display来布局的，其实超级烦的，最近发现了一个知识点，那就弹性布局，那就让我们来看看什么是弹性布局吧！

What"s 弹性布局

弹性就是Flex，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。
例如：
.box{display:flex;}

.box{inline-display:flex;}

注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效!!!

基本概念

采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。

容器有两个轴，一个水平主轴（main axis）一个垂直交叉轴（cross axis），起点终点都是容器的边界。

How to do

说实话其实我了解的也不多，我只能把我知道的写出来啦！
例如，先定义两个盒子：

.box{
            width: 200px;
            height: 200px;
            background-color: rgb(135, 135, 248);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .inner {
            width: 100px;
            height: 100px;
            background: pink;
            align-self: flex-end; 
        }

效果图

大家可以看到两个盒子都在屏幕的中间，那是因为我们在蓝色盒子的样式中添加了display: flex;align-items: center;justify-content: center;让我一个个道来。
display:flex让这个盒子拥有了弹性布局的属性，而作为子元素的粉红盒子也被定义了，有其父必有其子嘛，(^▽^)；

justify-content

justify-content为主轴的对齐方式，center顾名思义就是居中咯，当然他还有其他属性啦

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items为垂直交叉轴对齐方式，拥有的属性如下：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-self

大家还可以看到，我们的粉盒子并没有在它爸爸的中间，那是因为他也有自己的个性呀，那就是我们的align-self啦！
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

auto（默认值）: 继承父元素的属性。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch：将占满整个容器的高度。

好啦，我要说的就是这么多了，弹性布局真的是很好用的样式！！！?
如若对于此文章不满意还望谅解，一只菜鸟真诚的心！！！♥

GPU云服务器云服务器对于云计算的总结备案对于产品的要求对于人工智能的措施对于登录界面的sql注入

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

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

来自前端菜鸟对css display属性的理解

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。 1.display:none display：none; 此属性是说不让元素...

TZLLOG 2019-08-29 13:00 评论0 收藏0
来自前端菜鸟对css display属性的理解

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。 1.display:none display：none; 此属性是说不让元素...

SHERlocked93 2019-08-01 17:14 评论0 收藏0
个人总结（css3新特性）

摘要：要实现这一点，必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后，保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。 1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但...

马永翠 2019-08-29 13:12 评论0 收藏0
flex布局基本语法

摘要：注本文章按照菜鸟教程布局语法教程为原型稍加修改以方便自己学习菜鸟教程地址年，提出了一种新的方案布局，可以简便完整响应式地实现各种页面布局。注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、...

zhaot 2019-04-23 11:41 评论0 收藏0