创建一个flexbox：

.flex-container{
　　display:flex;

}

  1. flex-direction:  column;//将flex排成一列
  2. flex-direction: column-reverse;//与上同 按相反的序列排列
  3. justify-content:

　　　　4　.flex 项在交叉轴上的对齐

　　　　

  1. .flex-container {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }

flexbox预习的更多相关文章

  1. Flexbox 自由的布局

    css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...

  2. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  3. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

  4. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  5. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  6. 考前预习（Ubuntu配备）

    这几天考前预习,趁现在不想预习,写点之前就想写的东西吧. 贴一下个人认为有用的,在Ubuntu装机后的一些小事.不过挺杂的,主要是拿来给以后的自己看,以及让现在无聊的我有点事做. 首先,Ubuntu官 ...

  7. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. CSS3 Flexbox不迷路指南

    Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...

  9. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

随机推荐

  1. luogu3704 [SDOI2017]数字表格(莫比乌斯反演)

    link 设\(f_0=0,f_1=1,f_n=f_{n-1}+f_{n-2}(n\ge 2)\) 求\(\prod_{i=1}^n\prod_{j=1}^mf_{\gcd(i,j)}\),多组询问, ...

  2. 10.20 olinr

    感谢olinr提供md文件 免得我整理格式了 1.求助 (help.cpp/c/pas) [问题背景] 马上就要noip了,lrt同志\(\displaystyle\begin{vmatrix}\te ...

  3. c++将文件之间编译关系降到最低

    类的定义式:类的定义,可以知道类的大小 类的实现: 类的声明:类的声明,表明,使用此类,编译不会出错 C++并没有把“将接口从实现中分离”做得很好.Class的定义式不只详细叙述了Class接口,还包 ...

  4. pytorch搭建网络，保存参数，恢复参数

    这是看过莫凡python的学习笔记. 搭建网络,两种方式 (1)建立Sequential对象 import torch net = torch.nn.Sequential( torch.nn.Line ...

  5. vue.js 基础

      vuejs 遍历 数组, vue js 文章 http://www.cnblogs.com/libin-1/p/6851775.html https://zhuanlan.zhihu.com/p/ ...

  6. tfs强行签入和删除工作区

    作者:为爱痴狂 原文:http://www.cnblogs.com/splyn/archive/2011/10/31/2230213.html 域用户被网络管理员重建,或者其他用户牵出文档,导致的TF ...

  7. P2925 [USACO08DEC]干草出售Hay For Sale

    传送门 把每体积的干草价值看成一,就变成求最大价值 直接上背包就行了 注意优化常数 #include<iostream> #include<cstdio> #include&l ...

  8. CodeForces - 984C——Finite or not?分数整除问题（数论，gcd）

    题目传送门 题目描述:给你一个p/q,让你求在b进制下,这个小数是不是有限小数. 思路: 先来膜拜一个大神的博客,如何求小数的二进制表达,(感谢博主肘子zhouzi).然后小数的其他进制表达也一样. ...

  9. matplolib实例之 城市气候与海洋的关系研究

  10. 字符串 Instant 互转

    Instant inst = Instant.now(); System.out.println(inst);//2018-05-15T02:27:09.909Z String s1 = s.subs ...