容器属性:

　　左右对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around;

　　上下对齐方式：align-items:flex-start/flex-end/center/baseline/stretch　　

　　　　　　　　　　其中，baseline/stretch是用于存在内容的时候，基线对齐，伸展。

项目属性：

　　align-self:flex-start/flex-end/flex-center;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .container{

            display:flex;

            display:-webkit-flex;

            /*flex-direction:row;*//*默认*/

            /*-webkit-flex-direction:row;*/

            justify-content:center;/*子元素居中对齐*/

            /*align-items:center;!*在400的高度中竖向对齐*!*/

            height:400px;

            border:5px solid red;

        }

        .container .ch{width:200px;height:200px;border:10px solid green;color:green;}

        .ch:nth-child(1){

            align-self:flex-start;/*默认default*/

        }

        .ch:nth-child(2){

            align-self:flex-end;

        }

        .ch:nth-child(3){

            align-self:center;

        }

    </style>

</head>

<body>

<h1 style="color:red;">

    .container{display:flex;display:-webkit-flex;justify-content:center;}

</h1>

<div class="container"><!--注意container要有高度。子元素的align-self才有意义。-->

    <div class="ch">align-self:flex-start</div>

    <div class="ch">align-self:flex-end</div>

    <div class="ch">align-self:flex-center</div>

</div>

</body>

</html>

理解flex_对齐的更多相关文章

  1. （转）CPU Cache与内存对齐

    转自:http://blog.csdn.net/zhang_shuai_2011/article/details/38119657 原文如下: 一. CacheCache一般来说,需要关心以下几个方面 ...

  2. 利用php unpack读取c struct的二进制数据，struct内存对齐引起的一些问题

    c语言代码 #include <stdio.h> struct test{ int a; unsigned char b; int c; }; int main(){ FILE *fp; ...

  3. 【C语言】字节对齐（内存对齐）

    数据对齐 1.  对齐原则: [原则1]数据成员对齐规则:结构(struct)(或联合(union))的数据成员,第一个数据成员放在offset为0的地方,以后每个数据成员的对齐按照#pragma p ...

  4. 为什么要内存对齐 Data alignment: Straighten up and fly right

    转载于http://blog.csdn.net/lgouc/article/details/8235471 为了速度和正确性,请对齐你的数据. 概述:对于所有直接操作内存的程序员来说,数据对齐都是很重 ...

  5. windows和Linux内存的对齐方式

    一.内存对齐的初步解说 内存对齐能够用一句话来概括: "数据项仅仅能存储在地址是数据项大小的整数倍的内存位置上" 比如int类型占用4个字节,地址仅仅能在0,4,8等位置上. 例1 ...

  6. c++ 通过sizeof运算符看内存对齐

    一.基础数据类型 基础数据类型的sizeof,包括char.short,int,long,float,double 注意:实际数值有所偏差,与系统相关 二.数组及字符串 包括字符数组.字符指针.字符串 ...

  7. 利用vertical-align:middle垂直居中

    以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,结果在这里一点效果也没有.事实上vertical-align与text-align完全不一样 ...

  8. 7系列GTX中的疑惑

    1.PCOMMA与MCOMMA指什么? PCOMMA是指RD-部分的数据,MCOMMA是指RD+部分的数据. 2.risk信号作用? risk信号来指示有效的K码. 如果不选择用8b10b来编码,是需 ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型

    CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...

随机推荐

  1. perl的一些函数（二）

    1. tr 转换 转换不是替换(tr///==y///) tr/searchlist/replacementlist/用于查找某个一个字符串,并用replacementlist替换,可以使用正则表达式 ...

  2. ffmpeg-20160731-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...

  3. Linux内存管理原理

    本文以32位机器为准,串讲一些内存管理的知识点. 1. 虚拟地址.物理地址.逻辑地址.线性地址 虚拟地址又叫线性地址.linux没有采用分段机制,所以逻辑地址和虚拟地址(线性地址)(在用户态,内核态逻 ...

  4. 【leetcode】Minimum Size Subarray Sum（middle）

    Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...

  5. CentOS yum的详细使用方法

    yum是什么yum = Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理大量系统的更新问题yum特点可以同时 ...

  6. 统计 F-test 和 T-test

    1 显著性差异 如果样本足够大,很容易有显著性差异.样本小,要有显著性差异很难. y是因变量,x是自变量 2 F-test与T-test Ftest也称ANOVA,是用来检测一个y下的不同level的 ...

  7. 群内大神与你交流WEB经验 业内专家指点就职技巧

    就知道你是一个有理想要抱负的人,不会满足于做一个初级的前端开发工程师.在接下来的这个阶段,我们将走上前端开发的进阶之路,将自己的能力再往上拔高一个等级.同样,薪资也会往上升一个等级!但是,如果你是一个 ...

  8. 解决eclipse manven项目添加不了maven dependencis

    <classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER"& ...

  9. 模拟赛1029d2

    [问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...

  10. C++中实现对象的clone()

    在C#中,许多对象自动实现了clone函数,在C++中,要拷贝一个对象,除了自定义一个拷贝构造函数来实现对象复制外,还可以像C#中那样实现一个clone函数,这需要借助编译器实现的一个隐藏拷贝构造函数 ...