flex是什么,flex的优点是什么

日期:2023-04-06  作者:小天  来源:www.txunda.com  人气:487

一.容器 container 的属性 

1. flex-direction 主轴方向 ;

2. flex-wrap 主轴一行满了换行 ;

3. flex-flow 1和2的组合 ;

4. justify-content 主轴元素对齐方式 ;

5. align-items 交叉轴元素对齐方式//单行 ;

6. align-content 交叉轴行对齐方式//多行 ;

(1)flex-direction 主轴方向 

row(默认值):主轴为水平方向,起点在左端;

row-reverse:主轴为水平方向,起点在右端;

column:主轴为垂直方向,起点在上沿;

column-reverse:主轴为垂直方向,起点在下沿;

(2) flex-wrap 主轴一行满了换行 

(3)justify-content 主轴元素对齐方式 ;

1.flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向) ;

2.flex-end 靠着main-end对齐//参考常见术语(一般是右方向) ;

3.center 靠着主轴居中对齐//一般就是居中对齐 ;

4.space-between 两端对齐,靠着容器壁,剩余空间平分 ;

5.space-around 分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配 ;

6.space-evenly 平均对齐,不靠着容器壁,剩余空间平分 ;

总结:flex灵活的布局为网页开发带来了极大的效率,天津天迅达科技有限公司有限公司灵活运用此布局和其他布局解决方案,生产出令人满意的产品。

天津天迅达科技有限公司经过多年来对APP小程序、以及网站建设的探索,已经帮助每一个客户快速开发出属于自己的APP小程序网站,是万千企业之选。

标签:天迅达科技 天津APP开发 天津网站建设 网站建设