博主信息
博文 9
粉丝 0
评论 0
访问量 11103
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Flex术语 属性总结
不忘初心
原创
975人浏览过

轴线:主轴、交叉轴
方向:起始线、终止线
容器:
flex容器:display:flex
flex项目:直系子元素
剩余空间:flex元素对齐前提

容器属性:
一、flex-direction:决定主轴的方向,即项目排列的方向。
row:主轴为水平方向,项目沿主轴从左至右排列
column:主轴为竖直方向,项目沿主轴从上至下排列
row-reverse:主轴水平,项目从右至左排列,与row反向
column-reverse:主轴竖直,项目从下至上排列,与column反向
二、flex-wrap:换行
nowrap:自动缩小项目,不换行
wrap:换行,且第一行在上方
wrap-reverse:换行,第一行在下面
三、flex-flow:简写:默认值为row nowrap,即横向排列,不换行。
四、justify-content:决定在主轴上的对齐方式。
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space- between:两端对齐
space-around:沿轴线均匀分布
五、align-items:决定了item在交叉轴上的对齐方式。
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline:item第一行文字的底部对齐
stretch:当item未设置高度时,item将和容器等高对齐

批改老师:PHPzPHPz

批改状态:合格

老师批语:使用markdown语法,以后实际工作也会用得很多,现在提前练练
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学