本文目录
- 用flex4 怎样布局这样的页面
- flex如何像html那样布局
- CSS3中的弹性框布局Flexbox可以实现的效果有哪些
- flex布局有什么作用 常用属性
- flex布局 对齐问题
- 我想在一个div里用flex方式做出这种布局，请教应该怎么做
- flex布局怎么设置其中元素的宽度
- flex布局下，某个子元素单独布局怎么做
- CSS弹性盒子布局flex
- Flex布局
用flex4 怎样布局这样的页面
《vgroup width=“100%“ height=“100%“》
《group width=“100%“ height=“xxx“》
《hgroup width=“100%“ height=“100%“》
《group width=“50%“ height=“100%“/》
《group width=“50%“ height=“100%“/》
《/hgroup》
《/vgroup》
第2、3行里的height根据需要设置，一个固定值和一个100%（或者两个都是百分比，加起来为100%）。其它的地方基本同理可得。如果是用flex3，可以把group换成box（或者canvas）
flex如何像html那样布局
FLEX导出就是一个SWF文件。 你想分块， 要不把整个页面做成FLEX应用， 要不就是做成很多个FLEX应用分别导出为SWF并嵌入到页面DIV中。
CSS3中的弹性框布局Flexbox可以实现的效果有哪些
flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
《!DOCTYPE HTML》
《html》
《head》
《meta charset=“utf-8“》
《title》 flex box 弹性布局 《/title》
《meta name=“Keywords“ content=““》
《meta name=“Description“ content=““》
《style type=“text/css“》-flex
html,body{height:100%;margin:0;}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box;
-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块高度定死*/
.logo{width:100px;height:50px;background:#99f;}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/-布局
.content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/
.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1;}
.con2{-webkit-box-flex:1;}-flex
.con1{width:200px;background:#f99;}/*固定宽度，高度不定*/
.con2{min-width:200px;background:#999;}/*同上的min-height*/
.con3{width:100px;background:#9f9;}/*固定宽度，高度不定*/
.footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/
《/style》
《link href=““ style=“text/css“ rel=“stylesheet“/》
《/head》
《body》
《div class=“header“》
《div class=“logo“》logo部分，宽高固定《/div》
《div class=“nav“》nav部分，高度固定，宽度自适应《/div》
《/div》
《div class=“content“》
《div class=“con1“》内容初始化第1模块《/div》
《div class=“con2“》内容初始化第2模块《/div》
《div class=“con3“》内容初始化第3模块《/div》
《/div》
《div class=“footer“》底部，宽度不定，高度固定《/div》
《/body》
《/html》-布局
flex布局有什么作用 常用属性
1.以下6个属性设置在容器上
flex-direction row/row-reverse/column/column-reverse 决定主轴的方向（即项目的排列方向）
flex-wrap wrap/nowrap/wrap-reverse 决定项目排列方式
flex-flow 《flex-direction》|《flex-wrap》 前两者简写形式，默认flex-flow:row nowrap
justify-content flex-start/flex-end/center/space-between/space-around
决定项目在主轴的对齐方式
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items flex-start/flex-end/center/baseline/stretch
定义项目在交叉轴上如何对齐
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content flex-start/flex-end/center/space-between/space-around/stretch 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
-flex
flex布局 对齐问题
flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。 flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。 flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。 flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。 -ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。 其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式
-布局
我想在一个div里用flex方式做出这种布局，请教应该怎么做
《div class=“center“》
《div class=“left“》
1
《/div》
《div class=“right“》
《div class=“div d2“》2《/div》
《div class=“div d3“》3《/div》
《div class=“div d4“》4《/div》
《div class=“div d5“》5《/div》
《div class=“div d6“》6《/div》
《div class=“div d7“》7《/div》
《/div》
《/div》
《style》
.center{width:800px; height:300px; margin:auto; background:#DC4244;}
.center .left,.cente .right,.center .right .div{float:left;}
.center .left{height:300px; background:#7353F3;}
.center .right .div{height:150px;}
.center .left,.center .right .div{width:25%;}
.center .right .d2,.center .right .d4,.center .right .d6{background:#E616EC;}
《/style》
效果如图-flex
flex布局怎么设置其中元素的宽度
div实际得宽度＝div宽度＋padding的宽度。想保持一定距离有很多方法：你可以把让现在div的宽度改成减去padding后的宽度，还可以里面欠个div直接设padding。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。Webkit内核的浏览器，必须加上-webkit-前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
-布局
flex布局下，某个子元素单独布局怎么做
左边的灰色文字放在一个元素里，右边的红色文字放在另外一个元素里。这两个子元素都给一个flex:1,右边的元素的文字对齐方式写成：text-align:right;
CSS弹性盒子布局flex
在当前父元素（添加flex属性）里添加多个元素，即便子元素再多也不会出现滚动条的，有一种解决方法：你在要添加的子元素外再包裹一个元素div.a，这样不断添加子元素的时候，是增加的.a的高度，这样应该会会有滚动条了。（我猜的）-flex
《div class=“parent“》
《div class=“a“》
《p》《/p》
《p》《/p》
《p》《/p》
《p》《/p》
《div》
《div》
-布局
Flex布局
首先是上下布局，标题栏
和主体
主体
分左右
导航
和内容
左边可用tabnavigator
右边viewstack
或者static
