css3中的flexbox布局 css3中flexbox怎么布局
我们将只关注几个核心概念，等这些核心知识掌握之后，你可以再慢慢的学习那些不重要的相关知识。
1. 容器和容器里的元素
flexbox布局的两个最重要的概念是容器(蓝色)和容器里的子元素(红色)。在本文的例子中，容器和它的子元素都是div。
横向布局
为了实现flex布局，我们需要在容器的CSS里添加如下代码：
.container {
display: flex;
}
效果如下：
对于容器里面的子元素，我们什么都不需要做。它们会自动的按横坐标一字排开。
纵向布局
在上面的演示中，缺省排列是沿着横坐标方向的，还有一个方向是纵坐标，这个坐标轴的概念在理解flex布局中非常重要。
当我们在容器的CSS里添加flex-direction:column.后，子元素的排列方向就会发生变化。
.container {
display: flex;
flex-direction: column;
}
现在，子元素的排列方向是沿着纵坐标的方向了。
2. 调整子元素的对齐方式
现在我们让子元素重新横向布局，这需要将flex-direction属性的值从column改成row,子元素就会重新回到横向布局。
调整子元素的对齐方式，我需要使用justify-content和align-items这两个属性，它们控制着子元素的在横向和纵向两方面的定位和对齐方式。
下面我们将要使用justify-content属性让所有子元素都居中对齐：
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
使用align-items属性来控制子元素的竖向对齐方式：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
下面的列表中显示了justify-content和align-items属性可以使用的属性值：
justify-content:
- flex-start (default)
- flex-end
- center
- space-between
- space-around
align-items:
- flex-start(default)
- flex-end
- center
- baseline
- stretch
建议大家将justify-content、align-items和flex-direction几个属性混合使用，相互配合，看看都会达到什么样的布局效果。这样你才能正确的理解flexbox布局的布局方式。
3. 子元素
最后，我们将学习针对子元素的一些应对flexbox布局的CSS属性。
比如我们想调整第一个子元素的位置，我们可以给他添加CSS属性align-self，这个属性的属性值是和align-items是一样的用法:
.item1 {
align-self: flex-end;
}
效果是下面这样：
是不是很神奇企且简单！
关于flexbox布局的知识远比本文介绍的这些要丰富，这总重要的几个知识点就是这些，掌握了它们，再学些其他的用法就容易多了。
相关文章
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14
- 这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09
- 这篇文章主要介绍了jquery+css3实现会动的小圆圈效果,涉及jquery基于时间函数动态操作页面元素css3样式的相关技巧,需要的朋友可以参考下...2016-01-29
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14
详解CSS3中nth-child与nth-of-type的区别
这篇文章详细解析了CSS3中nth-child与nth-of-type的区别，有兴趣的同学可以参考一下 CSS3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of...2017-01-22- 这篇文章主要介绍了winform 使用Anchor属性进行界面布局的方法，有需要的朋友可以参考一下...2020-06-25
- 我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴...2015-12-21
- 这篇文章主要介绍了HTML5布局和HTML5标签的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
Android布局之TableLayout-TableRow布局
本文章来给各位同学详细介绍关于Android布局之TableLayout-TableRow布局,各位同学有需要可进入参考。 代码如下 复制代码 <?xml version="1...2016-09-20CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-02- 本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要为大家详细介绍了Android抽屉布局DrawerLayout的简单使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-17
- 本文我们来学习一下android开发入门教程，UI布局从浅入深，android布局分 1.LinearLayout，线性布局方式，2.Relative Layout，相对布局，3.AbsoluteLayout，绝对位置布局等。 A...2016-09-20