美文网首页
CSS3 flex弹性盒模型布局(一)

CSS3 flex弹性盒模型布局(一)

作者: 祝名 | 来源:发表于2018-11-26 16:14 被阅读0次

一.两层元素:父级-容器 子级-项目

二.基本概念

1. 弹性盒模型容器中的项目默认在主轴上排列

ul中li元素正常来讲是垂直排列的,但如果给予ul{display:flex},ul中的li自动在主轴上(水平)排列,省去了float:left操作

2. 子元素默认都排列在主轴上,不换行
3. 如果项目总宽度小于容器宽度,就正常排列,按照设置的宽度;
4. 如果项目总宽度大于容器宽度,那么子元素就均分容器宽度(注意:当主轴为垂直方向时,如果设置了行高,会把高度强行撑开,就无法均分了),设置宽度无效。

三.flex-direction主轴方向

1. 主轴和交叉轴永远是垂直的
ul{
    display:flex;
    flex-direction:row-reverse;
}

四.主轴上的排列方式

1.justify-content
display:flex;
justify-content:flex-end;
右对齐
display:flex;
justify-content:space-around;
display:flex;
justify-content:space-between;
两端对齐

相关文章

  • [读]响应式布局:CSS3弹性盒flex布局模型

    响应式布局:CSS3弹性盒flex布局模型

  • CSS布局之——Flex布局

    随着CSS3的到来,Flex布局出现了,Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型...

  • flex-box属性总结

    概述 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称为弹性盒模型...

  • flex 弹性布局盒模型

    flex 弹性布局盒模型 设置弹性盒模型 display:flex (新版) display:-webkit-b...

  • flex 弹性盒子

    弹性盒子是 CSS3 的一种新的布局模式Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型...

  • 【原创】Css-flex 布局

    Flex(Flexible Box)布局意为”弹性布局”,是CSS3最受欢迎的属性之一,简洁、快速,为盒状模型提供...

  • CSS3弹性盒子

    弹性盒模型 弹性盒模型是CSS3新增的属性,设置display属性值为flex的元素为弹性盒模型对象。弹性盒子由弹...

  • RN笔记:样式布局总结

    Flexbox布局 flex 弹性布局 number用于设置弹性盒模型分配空间,比如: flex:1 flexDi...

  • 弹性盒

    弹性盒-flex布局 弹性盒是css3的一种新的布局模式CSS3弹性换盒,是一种当页面需要适应不同的屏幕大小以及设...

  • 弹性盒

    弹性盒-flex布局弹性盒是css3的一种新的布局模式CSS3弹性换盒,是一种当页面需要适应不同的屏幕大小以及设备...

网友评论

      本文标题:CSS3 flex弹性盒模型布局(一)

      本文链接:https://www.haomeiwen.com/subject/kdebqqtx.html