在父级上设置display: flex;

父级称之为弹性容器;子级称之为弹性盒子。

如果父级没有设置高,则由子级来撑开;如果子级没有设置高,则子级的高和父级一样;

(在二者之间有一个没有设置高,则继承另一个的高)

属性名:justify-content;<--主轴对齐方式-->  ----(水平排列)

附带的属性值有:

flex-start;默认值从左到右  flex-end;   从右到左   center;水平居中

(注:上三个如果部设置外边距或内边距,那么弹性盒子就会挨着)

space-between;(均匀排列,间距在弹性盒子之间)

space-around(均匀排列,间距在弹性盒子两侧)

(注:虽然这个也是均匀排列,但两个弹性盒子之间的间距是弹性盒子一侧间距的两倍。)

space-evenly(均匀排列,弹性盒子和容器间距相等)

属性名:align-items<--侧轴对齐方式-->  -----垂直排列(给弹性容器设置)控制所有弹性盒子

align-self          单独控制某一个弹性盒子(给弹性盒子设置)

附带的属性值有:

stretch;拉伸      弹性盒子在侧轴方向没有尺寸才能拉伸

center;垂直居中

flex-srart;弹性容器左上角排列

flex-end;弹性容器左下角排列

flex..................相关推荐

  1. CSS flex 用法

    flex 用法: flex 可以在浏览器里点击就有~ 设置了 display: flex 的父元素被称之为 flex 容器(flex container),它的子元素都会以 flex 布局. flex ...

  2. flex java socket通信

    引用:http://developer.51cto.com/art/201003/189791.htm Java socket通信如何进行相关问题的解答呢?还是需要我们不断的学习,在学习的过程中会遇到 ...

  3. flex和bison实例分析

    最近在学习编译原理,利用flex和bison编写一个基于文本识别的简单计算器程序,参考<flex于bison>中内容,对程序进行一些简单的修改,加入Makefile.该计算器程序主要实现识 ...

  4. Adding a QR Code Reader in Flex on Android

    <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns ...

  5. 改善FLEX/FLASH性能的小技巧(转)

    使用下面的几个改善性能的技巧,如果你使用Flex Builder,那么可以使用调试窗口查看你的程序中关键的几步创建对象和内存回收的情况. 有时细小的调整会造成很大的不同.下面是一小部分能够改善你的程序 ...

  6. Flex实现页面多态--state对象

    在Flex 程序中,引入了状态设计的概念.在一个程序中,按照功能的需求,将界面切分成相对独立的部分.运行过程中,随着用户交互,界面在各个部分之间切换.比如在购物车程序中,登录界面.选购商品界面.购物车 ...

  7. 【转】Flex Application 初始化顺序

    转自:http://www.jexchen.com 大家都知道,我们在编写Flex应用程序时,通常是以<mx:Application>标签作为开头,实际上,Flex应用程序在启动运行的时候 ...

  8. Flex报错Error #2048: 安全沙箱冲突

    Flex+JPA架构,JPA程序迁移,从A服务器到B.其他一切没变,唯一变的就是IP. 前端Flex也就是swf报错Error #2048: 安全沙箱冲突:http://xxx.swf 不能从 xxx ...

  9. java flex 图片上传_flex上传图片到java服务器

    今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...

  10. Flex 布局详解 - 转自阮一峰老师

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何的盒子都可以使用它. 下面我们来看一下使用 Flex 布局的容器的属性 fle ...

最新文章

  1. 求职淡季成功跳槽大厂,他做对了这一件事!
  2. SQL CROSS JOIN
  3. 有一天老板和我要几个关键数据……
  4. Notice: Undefined variable: id in D:\phpStudy18\PHPTutorial\WWW\sqli-labs-master\Less-32\index.php o
  5. Acwing 217. 绿豆蛙的归宿
  6. Centos 6.5 安装 Nginx+MySQL+PHP
  7. FreeRTOS基础以及UIP之协程--C语言剑走偏锋
  8. linux下u盘的使用
  9. 迅捷pdf转换器——PDF批量转化成JPG
  10. sitemesh2.4
  11. 拉普拉斯方程在球、柱坐标系下的解
  12. 脑电数据处理分析教程汇总(eeglab, mne-python)
  13. 华为H3CNE认证题库、教材-热门下载帖汇总!
  14. Dashboard Design 4.0(Xcelsius)数据直接绑定功能:瑕瑜互见
  15. swb-2润湿平衡测试仪_自动化测试
  16. 计算机长时间休眠后无法唤醒,为什么我电脑长时间不动进入待机状态却无法唤醒出现死机情况?必须强制关机!...
  17. java自动生成物流单号
  18. Plist文件是什么?
  19. pikachu靶场 RCE SSRF Unsafe Fileload Over permission
  20. Flink Table和SQL的表和视图、Connectors和timestamp数据类型

热门文章

  1. 史上最全的vue插件库
  2. 网站在百度站长平台无上传站点LOGO权限下,如何实现LOGO图片在百度索引中自动抓取展现?
  3. 百度站长平台使用教程:流量与关键词
  4. fastadmin添加图片压缩处理
  5. 宝塔面板网络流量上行和下行速度代表什么?
  6. js 象棋游戏 _ 支持双方在线对战
  7. Vue项目国际化多语言
  8. 【计算机网络】局域网
  9. excel中Vlookup的使用,跨表查询
  10. python中datetime.strptime()