flex 布局

编程之家收集整理的这篇文章主要介绍了flex 布局编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

flex 浏览器兼容性


1.任何容器都可以设置 flex

.Box{display:flex}
.line{dispaly: inline-flex;dispaly:-webkit-flex}

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

2.设置flex的容器 (简称:容器),里面的内容称为 项目

3.容器有6个属性分别是:flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content

(1)flex-direction:项目的主轴方向 row (默认值) {水平方向,由左向右}| row-reverse{水平反方向} |column {垂直方向,由上向下} |column-reverse{垂直反方向}


(2) flex-wrap:项目换行no-wrap(默认值){不换行} |wrap{换行,超出向下排} | wrap-reverse

(3)flex-flow: flex-direction和 flex-wrap的简写

(4) justify-content:水平方向 项目的排列 flex-start {默认值,左对齐} |flex-end {右对齐} | center {居中} | space-between {两端对齐, 间隔相等} | space-around {项目两侧的间隔相等}

(5)align-items:项目在垂直方向的对齐方式。 flex-start {交叉轴的起点开始} | flex-end {交叉轴的末尾开始} |baseline {项目第一行的文字的基线对齐} | stretch (默认)未设置的高度或者auto 将占满整个高度

(6) align-content:定义多个轴的的对齐方式,如果项目只有一根轴线,该属性不起作用

总结

以上是编程之家为你收集整理的flex 布局全部内容,希望文章能够帮你解决flex 布局所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Flex相关文章

获取网络发布的webservice wsdl: http://www.flash-mx.com/ws/months.cfc?wsdl   GetMonths.mxml   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"         layout="
在开发四国军棋的游戏中,通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个api设计的方针就是基于状态机与事件驱动的flex主要机制,使开发工作简洁易行。现在,我们第一次使用这个api来开发一款中国象棋游戏,对一个成熟的开发工作者来说,我相信,你大概只需要半天时间就可以让这个象棋游戏运作起来。 现在,我们
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF" applicationComplete="registerGlobalKeyHandler()">
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与flex3的兼容。在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览,介绍一下Flex3到Flex4架构上的区别,以及在组
一 超酷皮肤主题推荐: 1. kingnarestyle: 下载地址:http://code.google.com/p/kingnarestyle/ 2.Carbon: 下载地址:http://www.fillcolors.com/post.cfm/carbon 3.Aqua: 下载地址:http://www.fillcolors.com/post.cfm/aqua 4.Rainbow: 下载地址
      昨天下载了一个新版本flex 4.1 sdk 包含升级adobe air 2.0 的版本的sdk ,当我换成了这个版本sdk 发现当存在文本的时候,垂直的布局方式存在一些差异。4.0版本则没有事情。不知道究竟发生了什么事情?做了一个简单的实验。看看差别究竟在哪里?    但是反而在同学间又没有这样的问题存在,十分究竟。记录一下。   <s:Group> <s:Grou
     类成员有四种修饰符: public  internal  dynamic(实现运行时添加类和属性的方法  dynamic class Foo)和final。 类成员可以有:public ,private, internal, protected     as文件的组织结构: package 中包含一个和文件名相同的public类,在package外有几个不是public的类,作为辅助类
还原问题:   request.setCharacterEncoding("UTF-8");   response.setContentType("text/html;charset=UTF-8");   request.setCharacterEncoding("UTF-8");       response.getOutputStream().println("中文");     java.i
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注