设置子元素在主轴(横轴)方向上的对齐方式为容器的开头

在“ Flexbox布局”模块之前，有四种布局模式：

四种布局模式：

块布局block，常见的就是div
内联inline，用于文本
表table，用于二维表数据
定位position，用于元素的明确位置

这些尽管布局可以暂时性满足我们的要求，可是代码写起来不够方便简洁，于是有了Flex布局。flex，顾名思义，可收缩的布局，它是一种灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

让我们从简单示例开始：

这是本例的代码，接下来的贴出的局部代码将基于该模板代码的改动。

html><html><head><style>. flex-container {background-color: rgb(153,93,181);}. flex-container > div {background-color: rgb(247,148,31);border-radius:10px;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}style>head><body><h1>The CSS Flexbox Layouth1>

<div class="flex-container">  <div>1div>  <div>2div>  <div>3div>  div>

body>html>

1flex布局

通过将display属性设置为flex，flex容器变得灵活

.flex-container {  display: flex;}

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2flex-direction

flex-direction属性定义容器要在哪个方向上排列展现flex的子项，决定了主轴的方向。

.container {  flex-direction: row | row-reverse | column | column-reverse;}

代码示例：

.flex-container {  display: flex;  flex-direction:row;}

row行(默认)：水平方向，从左到右；

row-reverse行反向：水平方向，从右到左；

column列：竖直方向，从上到下

column-reverse列反转：竖直方向，从下到上

3flex-wrap

.container{  flex-wrap: nowrap | wrap | wrap-reverse;}

nowrap(默认设置)：不换行，所有flex项目都在一行上

wrap：换行，flex项目将从上到下自动换行。

wrap-reverse：反向换行，flex项目将从下到上换行。

示例代码：

.flex-container {  display: flex;  flex-wrap: wrap;  background-color: rgb(153,93,181);}

4flex-flow

flex-flow是用于同时设置flex-direction和flex-wrap属性的简写属性。

示例代码：

.flex-container {  display: flex;  flex-flow: row wrap;  background-color: rgb(153,93,181);

5justify-content

定义了沿主轴的对齐方式。当一行中的所有伸缩项目已达到最大大小时，它可以帮助分配剩余的剩余可用空间。当项目溢出线时，它还对项目的对齐方式施加一些控制。

flex-start(默认)：将项目打包到flex-direction的开头。

flex-end：项目在flex-direction的末端排列。

center：项目沿居中

space-between：同一行中的flex项目之间都有均匀分布的空间。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around：项目在行中均匀分布，项目之间和边缘具有一定的空间。请注意，从视觉上看，空间是不相等的，第一项相对于容器边缘有一个单位的空间，但下一项之间有两个单位的空间。简单来说，space-around展现flex项目，让每个项目前中后都有一定空间的留白。

概括性的说，相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly：任意两个项目之间的间隔(以及边缘之间的空间)相等。

示例代码：

.flex-container {  display: flex;  justify-content: center;  flex-wrap:wrap;  background-color: rgb(153,93,181);}

6align-items

stretch(默认)：拉伸以填充容器(仍然遵守最小宽度/最大宽度)
flex-star：将项目放置在横轴的起点。
flex-end：将项目放置在横轴的末端。
center：项目在横轴上居中
baseline：项目对齐，例如基线对齐

示例代码:

.flex-container {  display: flex;  align-items:center;  flex-wrap:nowrap;  background-color: rgb(153,93,181);  height:300px;}

7align-content

space-around：第一个flex行到顶部边缘的距离和最后一个flex行到底部边缘的距离将会是相邻flex行之间距离的一半。

space-between使得flex项目的第一行对齐顶部，最后一行对齐底部。相邻flex行间距离相同。

center使得flex的项目行的在容器中间对齐

stretch拉伸flex的项目行，以此填满容器空间

flex-start使得flex的项目行，从容器的开始处从上到下排列

flex-end使得flex的项目行，从容器的底部从下到上排列

示例代码：

.flex-container {  display: flex;  flex-wrap:wrap;  align-content:space-between;  background-color: rgb(153,93,181);  height:300px;}

8完美的布局：水平垂直居中布局

巧用两个属性，达到水平垂直居中效果

关键代码如下:

.flex-container {  display: flex;  flex-wrap:wrap;  align-content:center;  justify-content:center;  background-color: rgb(153,93,181);  height:300px;}

9align-items和align-content解惑：

许多同学会疑惑，这align-items和align-content的功能很相似，它们有什么区别呢？

align-items是针对单行中的项目。对于主轴上的单行元素，align-items将使这些项目彼此对齐

而align-content属性适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。

前面的实例中，由于我们设置了margin:10px,导致align-items和align-content的区别不明显

现在，我们把css修改如下：

<style>.flex-container {display: flex;align-content:center;flex-wrap:wrap;background-color: rgb(153,93,181);height:300px;}.flex-container > div {background-color: rgb(247,148,31);border-radius:10px;width: 100px;margin: 1px;text-align: center;line-height: 75px;font-size: 30px;}style>

接下来，将align-content:center;修改为align-items:center;

"align-items:center;"把每个flex行看作是一个整体排列，行与行之间有间隔地向中间对齐。

在使用这两个属性的时候，如果我们的目标是把多行的flex项目看成是一个大整体来展示的话，那么我们选择用align-content；如果是针对单行的flex项目，那么选择用align-items进行排列。

本篇关于flex容器的属性讲解就是这些，下一篇：我们讲flex项目的属性分析。

感谢阅读~

设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局（上）...相关推荐

flex布局怎么设置子元素大小_48张小图带你领略Flex 布局之美
前言最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?? 48张图带你从0到1掌握flex布局方式. flex布局在某种程度上, ...
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局最外层是是一个div,div里面是 ...
flex 换主轴后子元素占满_css flex justify-content属性，子元素在主轴上的对齐方式。...
css flex justify-content属性,子元素在主轴上的对齐方式. justify-content属性控制子元素在主轴上的对齐方式,支持flex-start . flex-end . c ...
弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
弹性容器----六大属性(5.项目在交叉轴上的对齐方式) align-items属性定义项目在交叉轴(纵轴|侧轴)上如何对齐. 语法: .box {align-items: flex-start | ...
使用git将本地项目工程推送到码云上
1.在本地使用Intellj IDEA构建项目工程,整个项目工程结构如下图所示: 2.在工程根目录下面,使用git Bash打开git客户端: 3.使用git init初始化项目,此时会在工程根目录下 ...
异贝5G新零售工具，通过移动互联网技术，为中小微实体企业联盟、线上链接、线上线下自定义营销方案的推送。
异贝通过移动互联网技术应用,为中国实体企业实现企业联盟.线上链接.线上线下自定义营销方案的推送.实体企业互联网平台搭建:各种系统研发及技术智慧输出的一站式营销孵化综合服务科技平台! 经过团队的努力与发 ...
CSS初入门：设置子元素水平居中的方式
问题描述: 用几种方式实现元素位于父元素的水平居中位置,如图: 解决方式一通过控制子元素的左边框和右边框来达到居中的效果. 在那之前,我先举个我遇到过的错误示范 <!DOCTYPE html ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
Android项目中使用激光推送时在模拟器上运行时报Fatal signal 11的解决
本人一直用真机调试极光推送,一直没问题,今天准备在模拟器上运行项目看看,刚运行就爆掉了,感觉有些奇怪,遂查日志: 呵呵,致命错误:Fatal signal 11 (SIGSEGV) at 0x0007 ...

设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局（上）...

设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局（上）...相关推荐

最新文章

热门文章