创建一个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. oracle ，mysql，postgres jdbc配置文件

    #db mysql #jdbc.driver=com.mysql.jdbc.Driver #jdbc.url=jdbc:mysql://localhost:3306/mysql?&useUni ...

  2. matplotlib学习笔记（四）

    利用matplotlib可以显示图像 imread()和imshow()提供了简单的图像载入和显示功能. img = plt.imread("xxx.jpg") imread()可 ...

  3. Luogu P4404 [JSOI2010]缓存交换 优先队列

    细节题?...调了半天.... 可以发现,每一次从缓存中删除的主存一定是下次访问最晚的,可以用优先队列来处理...还有要离散化...还有链表末尾要多建一些点...否则会死的很惨... #include ...

  4. 测试转型之路--学习ing

    http://www.importnew.com/27309.html 测试开发工程师 - 抖音方向 职位描述1.深度参与产品研发项目, 协同产品经理.业务研发.用户反馈团队优质交付产品:2.参与质量 ...

  5. python3 读取表格的数据

    python3 读取表格的数据 xlrd1.1.0的下载网址:https://pypi.python.org/pypi/xlrd. xlrd1.1.0兼容python2和python3. python ...

  6. tomcat的安装部署

    第一步: 先把压缩包拖到知道的目录,解压 tar xf apache-tomcat-8.0.27.tar.gz -C /usr/local/ ln -s /usr/local/apache-tomca ...

  7. 事务背书 ACID, CAP, BASE

    A atomicity 原子性 一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成, C consistency 一致性 在事务开始之前和事务结束以后,数据库的完整性没有被破 ...

  8. java——数组队列 ArrayQueue

    队列: Array: package Date_pacage; public class Array<E> { //叫它静态数组 //private int[] data; private ...

  9. 前后端分离之JWT用户认证

    在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了.于是我 ...

  10. IDEA修改git账号及密码的方法

    IDEA修改git账号及密码的方法: 1.file->settings->passwords 2.重启IDEA 3.执行一次提交或更新 当执行提交或更新之后,idea会自动提示输入账号.密 ...