设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

微信小程序设计开发中flex的用法

编辑: 时间:2018-05-12 08:34:31

   布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。

  一、Flex布局是什么?

  Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

  .box{ display: flex;}

  行内元素也可以使用Flex布局。

  .box{ display: inline-flex;}

  Webkit内核的浏览器,必须加上-webkit前缀。

  .box{ display: -webkit-flex; /* Safari */ display: flex;}

  注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

  二、基本概念

  采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"

  容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross。 start,结束位置叫做cross end。

  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

  lex-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>

  效果图:

  

这里写图片描述

 

  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>

  </view>

  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>

  效果图:

  

这里写图片描述

 

  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>

  效果图:

  

这里写图片描述

 

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号