flex布局的详细使用，文字加图片

最新推荐文章于 2023-03-09 22:08:58 发布
最新推荐文章于 2023-03-09 22:08:58 发布
阅读量3.7k 收藏 11
点赞数 4
分类专栏： 笔记 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41121649/article/details/105349961
版权

flex两个概念：flex container 、flex items

认识flex container 和 flex items
flex container指的是父容器，flex items指的是子容器。

flex布局的主轴和交叉轴

flex布局中没有x、y轴，flex布局中只有main axis（主轴），cross axis（交叉轴）。
认识flex的主轴和交叉轴

flex container和flex items的属性

flex containerflex items
flex-flowflex
flex-directionflex-grow
flex-wrapflexbasis
justify-contentflex-shrink
align-itemsorder
align-contentalign-self

flex布局的使用

未启动flex布局：

<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
<style type="text/css">
  .box {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    background-color: orange;
  }

  .item {
    width: 100px;
    height: 100px;
    color: white;
  }

  .item1 {
    background-color: red;
  }

  .item2 {
    background-color: black;
  }

  .item3 {
    background-color: yellow;
  }
</style>

效果：
在这里插入图片描述
启用flex布局：
在这里插入图片描述
启动flex布局后会发现，里面的三个子容器会水平排布，这是默认效果。flex items默认是沿着main axis从main start开始往main end方向排布的。

flex container属性介绍

flex-direction：
默认flex-direction: row，flex-direction的作用是决定main axis的方向。上面的排布方式也是因为flex-direction: row。
flex-direction的取值有4钟：
箭头表示main axis的走向

取值效果
row从左到右 →
row-reverse从右到左←
column从左上到左下↓
column-reverse从左下到上↑

比如当box样式为：
.box {
width: 500px;
height: 300px;
margin: 0 auto;
background-color: orange;
display: flex;
/在父容器中输入display: flex就是启动了flex布局/
flex-direction: row-reverse;
}
效果：
在这里插入图片描述
justify-content：
justify-content决定flex items在main axis上的对其方式。
justify-content的取值：

取值效果
flex-start默认方式，和main start对齐在这里插入图片描述
flex-endmain end对齐在这里插入图片描述
center居中对齐，items会居中对齐，1和3items一边距离cross size的两边的距离相等在这里插入图片描述
space-betweenflex items之前的距离相等，旁边靠近父容器的两个items和父容器贴在一起在这里插入图片描述
space-evenly在这里插入图片描述
space-around从左下到上↑

align-items：
决定flex items在cross axis上的对其方式。

align-items取值：

取值效果
normal默认方式，注意这里的box属性中的height=100px取消了，这里进行了拉升拉伸。在这里插入图片描述
stretch当flex items在cross axis方向上的size为auto时，会自动拉伸填充flex container,效果和上面一样，前提是没有设置高度
flex-start会顶部对齐，给item1,2，3的样式添加不一样的高度，50，150，250 ，没高度会拉伸在这里插入图片描述
flex-end底部对齐在这里插入图片描述
center居中对齐在这里插入图片描述
baseline文字基线对齐，只对第一行的字体有效在这里插入图片描述

flex-wrap:
决定是flex container单行还是多行
这里需要改变一下html布局：多添加几个items
在css样式中也将items的高度变回100px，.box的样式的宽度由500改成550

  <body>
  <div class="box">
     <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">4</div>
    <div class="item item2">5</div>
    <div class="item item3">6</div>
    <div class="item item1">7</div>
    <div class="item item2">8</div>
    <div class="item item3">9</div>
    <div class="item item1">10</div>
    <div class="item item2">11</div>
    <div class="item item3">12</div>

  </div>
</body>
<style type="text/css">
  .box {
    width: 550px;
    height: 300px;
    margin: 50px auto;
    background-color: orange;
    display: flex;
    /*在父容器中输入display: flex就是启动了flex布局*/
    flex-wrap: nowrap;
  }

  .item {
    width: 100px;
    /* height: 100px; */
    color: white;
  }

  .item1 {
    background-color: red;
    height: 100px;
  }

  .item2 {
    background-color: black;
    height: 100px;
  }

  .item3 {
    background-color: yellow;
    height: 100px;
  }
</style>

flex-wrap取值：

取值效果
nowrap默认单行在这里插入图片描述
wrap多行在这里插入图片描述
wrap-reverse多行，但是cross start和cross end相反在这里插入图片描述

flex-flow:
flex-flow是flex-direction和flex-wrap的简写，可以简略，顺序任意.

<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">4</div>
    <div class="item item2">5</div>
    <div class="item item3">6</div>
    <div class="item item1">7</div>


  </div>
</body>
<style type="text/css">
  .box {
    width: 550px;
    height: 300px;
    margin: 50px auto;
    background-color: orange;
    display: flex;
    /*在父容器中输入display: flex就是启动了flex布局*/
    justify-content: space-evenly;
    flex-flow: row wrap;
    /* align-content: flex-start; */
  }

  .item {
    width: 100px;
    /* height: 100px; */
    color: white;
  }

  .item1 {
    background-color: red;
    height: 100px;
  }

  .item2 {
    background-color: black;
    height: 100px;
  }

  .item3 {
    background-color: yellow;
    height: 100px;
  }
</style>

在这里插入图片描述
align-content:
决定多行flex items在cross axis上的对其方式，和justify-content类似
align-content取值：

取值效果
flex-start默认方式，和corss start对齐在这里插入图片描述
flex-endcorss end对齐在这里插入图片描述
center居中对齐，items会居中对齐，1和5items一边距离cross size的两边的距离相等,上下两边对齐在这里插入图片描述
space-between上下的flex items贴边在这里插入图片描述
space-evenly在这里插入图片描述
space-around在这里插入图片描述

flex items属性介绍

order:
决定flex items的排序。
可以设置任意数值，整数，0，数值越小排在越前面。
默认0。

<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>


  </div>
</body>
<style type="text/css">
  .box {
    width: 550px;
    height: 300px;
    margin: 50px auto;
    background-color: orange;
    display: flex;
    /*在父容器中输入display: flex就是启动了flex布局*/

  }

  .item {
    width: 100px;
    /* height: 100px; */
    color: white;
  }

  .item1 {
    background-color: red;
    height: 100px;
    order: 15000000;
  }

  .item2 {
    background-color: black;
    height: 100px;
    order: 3;
  }

  .item3 {
    background-color: yellow;
    height: 100px;
    order: 10000;
  }
</style>

在这里插入图片描述
align-self:
默认：auto，遵从flex container设置的align-items
stretch、flex-start、flex-end、center、baseline效果一样。

flex-grow:

 .item {
    width: 100px;
    /* height: 100px; */
    color: white;

  }
.item1 {
    background-color: red;
    height: 100px;
    flex-grow: 1;
  }

  .item2 {
    background-color: black;
    height: 100px;
    flex-grow: 1;
  }

  .item3 {
    background-color: yellow;
    height: 100px;
  }

设置flex-grow前：
在这里插入图片描述
设置flex-grow后：
在这里插入图片描述
解释：
在这里插入图片描述
flex-shrink:
在.box样式中

  .box {
    width: 500px;
    height: 300px;
    margin: 50px auto;
    background-color: orange;
    display: flex;
    /*在父容器中输入display: flex就是启动了flex布局*/
    
  }
   .item {
    width: 250px;
    /* height: 100px; */
    color: white;

  }

效果：
在这里插入图片描述
添加 flex-wrap: wrap；
在这里插入图片描述
解释：
在这里插入图片描述
flex-shrink的用法和flex-grow一样。

flex-basis:
用来设置flex、items在main axis方向上的base size, 默认值：auto。
决定flex items最终base size的因素，优先级高到低：

  1. max-width、max-height、min-width、min-height。
  2. flex-basis。
  3. width、height。
  4. 内容本身的size。
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
<style type="text/css">
  .box {
    width: 500px;
    height: 300px;
    margin: 50px auto;
    background-color: orange;
    display: flex;
    /*在父容器中输入display: flex就是启动了flex布局*/
  }

  .item {
    width: 100px;
    /* height: 100px; */
    color: white;
  }

  .item1 {
    background-color: red;
    height: 100px;
    flex-basis: 300px;
  }

  .item2 {
    background-color: black;
    height: 100px;


  }

  .item3 {
    background-color: yellow;
    height: 100px;

  }
</style>

在这里插入图片描述
flex:
flex是flex-grow、flex-sgrink、flex-basis的简写，属性可以指定1个，2个，3个值。
单值语法：
一个无单位的值会被认为flex-grow的值。
一个有效单位的宽度值，会被认为flex-basis。
关键字：none,auto,initial。
双值语法：
第一个值必须是：
无单位数，认为是flex-grow。
第二个值必须是：
一个无单位数：认为是flex-shrink。
一个有效单位宽度：认为是flex-basis。
三值语法：
第一个值必须是无单位数，认为是flex-grow。
第二个值必须是无单位数，认为是flex-shrink。
第三个值必须是有效单位宽度，认为是flex-basis。

Liyybb
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文字环绕图片的布局效果(使用动态div实现)
12-12
CSS的float属性，有left，right。 那么，如果我想让图片浮在中间呢？有没有float:middle呢？ 貌似是没有勒。 最新的CSS3的分栏属性（http://www.w3.org/TR/css3-multicol/）可以让文字分栏，然后再让图片左浮右浮，以此来实现图片在中间的“假象”。 如何实现“文字环绕图片”的霸道效果呢？！！（虽然感觉很2，没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~） 答案就是，用动态div啦~ 把文字分成4块，环绕着图片。图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 这样，即使只有左浮右浮，也可以实现文字
flex-修改主轴方向，弹性盒子换行与调节行对齐方式
最新发布
m0_57851747的博客
11-29 521
flex-修改主轴方向，弹性盒子换行与调节行对齐方式。flex-direction改变元素排列方向，要注意主轴方向修改侧轴也会随之变化，两轴始终相互垂直。子元素宽度发生了改变，使其宽度总和等于父元素，子元素会被压缩或者拉伸，所以才叫弹性盒子。在上面的例子我们看到了换行后自动给出了均匀的间隙，要修改就得调节行对其方式。在flex盒子中主轴方向默认是水平方向，侧轴默认是垂直方向
flex布局之文字加图片
AdolfQiu的博客
10-22 1641
flex两个概念：flex container 、flex items flex container指的是父容器，flex items指的是子容器。 flex布局的主轴和交叉轴 flex布局中没有x、y轴，flex布局中只有main axis（主轴），cross axis（交叉轴）。 flex container和flex items的属性 flex container flex items flex-flow flex flex-direction flex-grow
实现图片与文字在行内水平对齐
HKing147的博客
03-09 295
实现图片与文字在行内水平对齐
CSS 弹性布局 flex
Ares5k
05-07 537
css 弹性布局 flex 常用属性
Flex实现环绕布局
WRian_Ban的小晴天
05-08 2875
html,body{ width: 100%; height: 100%; } html,body,ul,li,a{ padding: 0; margin: 0; list-style-type: none; text-decoration: none; } .sup{
【我不知道的css】巧用flex:0实现上方图片下方文字效果
laplacepoisson的博客
04-15 3463
【我不知道的css】巧用flex:0实现上方图片下方文字效果要求代码原理 要求 要求使用flex布局实现下图所示的效果，容器内部左边为图片和文字，图片在上，文字在下，图片大小不一，文字长度不一，但要求文字根据图片的宽度自动换行。 代码 <div class="container"> <div class="wrapper"> <img src="./images/1.jpg" alt="" width="200"> <p>这是一段文字这
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear＜伪元素、标签的使用＞）1
weixin_47295886的博客
07-12 1384
html--css排版--float（浮动排版）：块级元素（占据父容器的一整行）在一行中显示、文字围绕图片进行摆放、父元素高度塌陷的问题（ 浮动元素的清除 属性 clear）1
flex技术-在图片上添加文字
w_y_loong的专栏
11-11 1244
private static var format1:TextFormat = new TextFormat(null,16,"0xff0000");//添加到图片上文字的格式 /**                  * 在图片上添加文字                  */                  public static function setTextToImag
响应式布局
leibaowen的博客
05-06 135
响应式布局 指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检
flex3的cookbook书籍完整版dpf（包含目录）
07-14
12.7节在Flex Effect里使用DisplacementMapFilter过滤器 12.8节创建AnimateColor 特效 12.9节使用Convolution Filter创建渐变效果 第十三章. 集合（439） 13.1节. 为ArrayCollection添加，排序和获取数据 13.2节. ...
react-native-demo:使用react-native版本写的APP组件演示，同时对源代码添加注释（由于开发用mac，故暂未兼容安卓）
03-22
native组件导航器路由WebView网页TabBarIOS导航切换栏TouchableHighlight点按动作查看布局文字文字react-native-swiper图片浏览自定义组件本项目综合了如下react-native的API 动画获取网络请求警报模拟html的警报...
react-native-express-cn:上快速上手React Native，包含相关示例:shortcake:
03-08
construction: 快速开始快速入门现代JavaScript现代Javascript ES2015 ES2015 JSX JSX React组件React组件组件API 组件API 生命周期API生命周期核心组件核心组件看法容器组件弹性盒Flex布局文本文字组件图像图片组件...
vue 路由刷新出新 Uncaught SyntaxError: Unexpected token ‘＜‘
qq_41121649的博客
08-30 4034
问题解决方法1：将在路由中引入的组件路径改为绝对路径，比如： // 原来引入方式 const a= () => import('./A/a.vue') // 将'./'改为'/' const a= () => import('/A/a.vue') 问题解决方法2：修改vue.config.js文件 const path = require('path') // 引入path模块 function resolve (dir) { return path.join(__dirname, dir
gitee码云的初次使用代码托管和二次提交
qq_41121649的博客
03-23 2903
初次使用创建ssh公钥步骤 1.初次使用码云先创建自己的账号。 2.登录，找到设置—>账户管理—>ssh公钥管理。 3.在本地创建ssh公钥，这里需要用到git,如果没装的请去百度自行安装，很简单的。 打开命令窗口输入： ssh-keygen -t rsa -C “[email protected]” [email protected]你的邮箱。 会出现提示，按照提示三次回车即可。 这就...
vue创建自定义插件，message弹窗（toast）
qq_41121649的博客
04-08 901
插件介绍 自定义一个可以接受数据的模板用作mseage的弹窗组件，比如点击一个按钮会出现这种提示的组件。 将这个组件变为一个插件，可以通过类似$store来使用的插件。 比如在某个组件调用这个插件可以使用$toast.show(mesage,timeout)的方式使用。 要完成这个功能需要用到vue的extend和use的方法。 插件实施完整步骤 创建对应弹窗模板 <template&gt...
树形结构扁平化的一个简单方法
qq_41121649的博客
10-24 548
【代码】树形结构扁平化的一个简单方法。
flex布局图片文字居中
07-28
要在 Flex 布局中实现图片和文字的居中，可以按照以下步骤操作： 1. 创建一个容器元素，可以是一个 `div` 或其他元素。 2. 将容器元素的 `display` 属性设置为 `flex`，以启用 Flex 布局。 3. 使用 `justify-content` 属性将内容水平居中。可以将其值设置为 `center`。 4. 使用 `align-items` 属性将内容垂直居中。也可以将其值设置为 `center`。 5. 将图片和文字放置在容器元素内。 以下是一个示例代码： ```html <style> .container { display: flex; justify-content: center; align-items: center; } </style> <div class="container"> <img src="path/to/image.jpg" alt="Image"> <p>Some text</p> </div> ``` 通过以上代码，图片和文字将在容器元素内居中显示。你可以根据需要进行样式调整，例如设置容器的宽度和高度，调整图片和文字的样式等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值