CSS - Flex 实例篇(二)

简介: CSS - Flex 实例篇(二)

1.2 双项目


image.png



.box {
  display: flex;
  justify-content: space-between;
}


image.png


.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

image.png


.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

image.png


.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

image.png

.box {
  display: flex;
}
.item:nth-child(2) {
  align-self: center;
}


image.png

.box {
  display: flex;
  justify-content: space-between;
}
.item:nth-child(2) {
  align-self: flex-end;
}

目录
相关文章
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
18 0
|
3月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
3月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
3月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
3月前
|
前端开发 容器
CSS Flex 弹性盒模型
当元素设置了display: flex样式时,表示当前元素开启了flex布局,这个元素成为一个 flex 容器(flex container)。这个元素不会脱离文档流,元素中的内容沿着两个轴的方向进行布局。 开启了flex布局的元素就是一个伸缩容器(flex 容器),伸缩容器中所有的子元素就是伸缩项目。
|
3月前
|
前端开发 测试技术 容器
CSS Flex 布局和 Grid 布局怎么选?
CSS Flex 布局和 Grid 布局怎么选?
|
4月前
|
前端开发 容器
CSS BFC是什么,应用实例
CSS BFC是什么,应用实例
24 0
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
55 0
|
4月前
|
弹性计算 前端开发 容器
CSS之Flex布局的详细解析
Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
59 0
|
4月前
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
55 0