CSS - Flex 之最直观的方式学习 Flexbox 属性(二)

简介: CSS - Flex 之最直观的方式学习 Flexbox 属性(二)



 
         

wrap-reverse, Flex itms会被按照从左到右从下到上的顺序在多行中显示。


image.png


默认值:nowrap

注:这个属性也跟书写模式相关。

 

flex-flow

这个属性是flex-directionflex-wrap属性的缩写。

例子:

   

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}


默认值:row nowrap

 

justify-content

这个属性会根据当前容器的主轴来排列子元素。它可以在所有flex items都在同一行并且不可伸缩,或是可伸缩但是达到它们的最大尺寸时候,分配剩余空间。

例子:

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}


Flex itemslrt上下文中会向左边靠拢


image.png


.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

Flex itemsltr上下文中向右靠拢

image.png


.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
} 


Flex items会居中

image.png


.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

除了第一个和最后一个,Flex items会有相同的间隔。

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}


所有Flex item 都会有相同间隔


image.png



默认值: flex-start

 

align-items

Flex items 会根据当前容器的主轴线对齐,跟justify-content很相似,但是方向垂直。

这个属性设置所有flex items默认对齐方式。

例子:

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

Flex items会占满flex container的高度,从cross start到cross end


image.png


.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}
目录
相关文章
|
3月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
3月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
68 2
|
3月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
101 1
|
3月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
139 10
|
3月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
64 1
|
3月前
|
前端开发
css简写属性
css简写属性
45 0
|
5月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
4月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
439 57
|
3月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。

热门文章

最新文章