FLex布局详解---1
2016-12-06 16:44
309 查看
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码。
flex-direction属性表示布局的方向 有两个值: row | column 默认属性是row 行布局
html代码如下:
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
flex-direction: column属性:
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
flex-direction: column效果图:
justify-content:弹性项目在主轴main-axis线上的对齐方式; 值:flex-start | flex-end |
center | space-between | space-around (注:当横向排列时 主轴就是x轴;反之则是y轴。)
justify-content:flex-start
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
flex-end | center | space-between | space-around 值同理
align-Items表示在垂直方向上的布局情况定义在父级容器中;
有 flex-start | flex-end | center |stretch 四个值。
align-items:flex-start;
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
align-items:center;
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
align-items:flex-end;
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
flex-direction
flex-direction属性表示布局的方向 有两个值: row | column 默认属性是row 行布局html代码如下:
<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
flex-direction: column属性:
<view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp" style="flex-direction:column;height: 100%;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> < 4000 /view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
flex-direction: column效果图:
justify-content
justify-content:弹性项目在主轴main-axis线上的对齐方式; 值:flex-start | flex-end | center | space-between | space-around (注:当横向排列时 主轴就是x轴;反之则是y轴。)
justify-content:flex-start
<view class="section"> <view class="section__title">justify-content:flex-start</view> <view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
flex-end | center | space-between | space-around 值同理
align-items
align-Items表示在垂直方向上的布局情况定义在父级容器中; 有 flex-start | flex-end | center |stretch 四个值。
align-items:flex-start;
<view class="section"> <view class="section__title">align-items:flex-start;</view> <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
align-items:center;
<view class="section"> <view class="section__title">align-items:center;</view> <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
效果图:
align-items:flex-end;
<view class="section"> <view class="section__title">align-items:flex-end;</view> <view class="flex-wrp" style="flex-direction:row;align-items:flex-end;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
相关文章推荐
- CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
- 刨坑:Flex布局新旧混合写法兼容写法详解(兼容微信)
- React Native系列之flexbox布局详解
- Flex布局新旧混合写法详解
- React Native探索(四)Flexbox布局详解
- Flex 相对布局详解
- Flex布局详解
- Flex 布局 详解
- Flex布局新旧混合写法详解(兼容微…
- 2017-03-21 Flex布局新旧混合写法详解(兼容微信) http://www.tuicool.com/articles/Yzeu6j7
- Flex布局新旧混合写法详解(兼容微信)
- 微信小程序 Flex布局详解
- CSS3 Flex布局详解与新旧法语对比
- Flex 布局之详解
- 详解CSS中flex布局
- CSS3 弹性布局弹性流(flex-flow)属性详解和实例
- CSS3 Flex布局 Flexbox的属性详解
- 弹性布局详解display:flex;
- Flex布局新写法兼容写法详解
- display:flex 弹性伸缩布局详解