电视台视频网站建设方案,茶网站建设宗旨,网站设计公司模板,汽车企业网站开发方案很多人不明白这个display:flex是到底是什么东西#xff0c;如何使用的 。
1.什么是display#xff1a;flex呢#xff1f;
答#xff1a;flex是 flexible box的缩写#xff0c;意为弹性布局 #xff1b;这个东西的引入#xff0c;为盒模型提供了最大的灵活性#xf…很多人不明白这个display:flex是到底是什么东西如何使用的 。
1.什么是displayflex呢
答flex是 flexible box的缩写意为弹性布局 这个东西的引入为盒模型提供了最大的灵活性可以相应式的实现各种页面的布局。 基本概念
采用flex布局的元素称为flex容器(flex container)简称容器。 在这个容器中默认存在两个轴水平方向的主轴main axis和 垂直方向上的交叉轴cross axis。
图 摘自他人博客 以下6个属性设置在容器上 flex-direction 容器项目的排列方向默认是横向排列flex-wrap 容器内项目的换行方式flex-flow flex-direction 和 flex-wrap 属性的复合属性。justify-content 项目在主轴上对齐样式align-item 项目在交叉轴上如何对齐align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用 注意 如果元素不是弹性盒对象的元素则flex-flow 属性是不起作用的 属性值 用法 !DOCTYPE html
!DOCTYPE html
htmlheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedgetitlePage Title/titlestyle.father {width: 500px;height: 100px;background-color: red;display: flex;flex-flow:row;}.box1 {flex: 3;background: blue;}.box2{flex: 2;background: pink;}/style
/headbodydiv classfatherdiv classbox1/divdiv classbox2/div/div
/body/html 以上仅是我个人初步学习后期学习在进行更新! ~~~~~~~~~~~ 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idhbbbcabtitle学习关于display flex 布局问题
