flex布局个人总结

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量105 收藏
点赞数 1
分类专栏： css 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40586654/article/details/107250601
版权 
<html>
      <div class="box1">
          <span>1</span>
          <span>2</span>
          <span>3</span>
      </div >
      <div class="box2">
          <span>1</span>
          <span>2</span>
          <span>3</span>
      </div>
</html>
<style>
.zong{
    /* display: flex; */   /* 块级元素flex布局 */
    /* display: inline-flex; */  /* 行列元素flex布局 */
    /* display: flex;
   flex-direction:row; */
   /* 父级左浮动 顺序*/
   /* display: flex;
   flex-direction:row-reverse; */
   /* 子级倒序  右浮动 */
   /* display: flex;
   flex-direction:column; */
   /* 子级随标签元素（块级或者行内） 顺序 */
   /* display: flex;
   flex-direction: column-reverse; */
   /* 子级随标签元素（块级或者行内）  倒序 */
    /* display: flex;
    flex-wrap: nowrap; */
    /* 不换行 不管子级的宽度，即使子级宽度超过父级宽度也不会换行。*/
    /* display: flex;
    flex-wrap: wrap; */
    /* 换行，超过父级就换行。 */
    /* display: flex;
    flex-wrap: wrap-reverse; */
    /* 只要换行子级就倒序排列，不换行还是顺序 */
    /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
    /* display:flex; */
    /* flex-flow: column wrap; */
    /* display: flex;
    justify-content:flex-start; */
    /* 左对齐（倒序） */
    /* display: flex;
    justify-content:flex-end; */
    /* 右对齐（顺序） */
     /* display: flex;
    justify-content:center; */
    /* 居中（顺序） */
     /* display: flex;
    justify-content:space-between; */
    /* 两端对齐，项目之间的间隔都相等。 */
     /* display: flex;
    justify-content:space-around; */
    /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
}
.box1 span{
    text-align: center;
    border:1px solid #ccc;
}
.box2{
    display: flex;
    width:100%;
}
.box2 span{
    flex-grow: 1;
    width:0;
    bordeR:1px solid #f00;
}
</style>

 

wuko.0
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex相册
04-07
总结来说，Flex相册是一款利用Flex技术构建的高效图片展示工具，其源码结构清晰，遵循MVC设计原则。通过学习和理解其工作原理，开发者不仅可以创建出具有专业品质的相册应用，还可以将Flex技术应用于更广泛的项目...
微信小程序个人中心的列表控件实现代码
10-15
在样式定义中，`.list-item`使用了Flex布局，使图片、文本和箭头水平居中对齐。`position: relative`是为了让绝对定位的箭头相对于这个容器定位。`.item-image`和`.item-text`分别设置了图片和文本的样式，`.image-...
:span、diaplay:inline-flex的动态布局
weixin_44138723的博客
04-12 916
CSS实现下面样式 ps:导入、导出按钮会根据角色显隐(!!!) 要求：当按钮隐藏时，整体偏右移动 思路1:使用element-ui的Layout 布局 给每个 el-col动态绑定span 例<el-col :span="5"> 这个“5”可以改变 2.给这个el-col一个样式，width为auto它好像就会根据整个大的div去缩放这个el-col大小。 .el-col-5{ display: flex; width: auto; } 3.由于input框前面的文字长短
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
介绍 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .main{ width:200px; background-color: red
【CSS基础】flex布局的个人使用记录（非教学）
庞囧的博客
03-25 131
文章目录前言特点前置知识轴使用父级（容器）启动flex改变主轴方向 flex-direction设置主轴的排列方式 justify-content设置交叉轴的排列方式 align-items子项（伸缩项目）手动排序 order单独设置交叉轴的排列方式 align-seft 前言 这个css特性算是高频使用特性了，而且面试中有时候也会当作上机题，这时候就不会有代码提示了 >_<。 特点 在得不到父级高度的情况下也能将子级中心定位； 脱离文档流的子级也能作用到； 子级自动转换成行内块级元素； 子级
最近学习flex布局的小收获
weixin_39808181的博客
04-13 99
<template> <div class="group-main"> <div class="box-left"> <div class="box-left-top"> 1 </el-card> </div> <div class="box-left-bottom"> 2 </div> <.
CustomStudentRegister.zip_flex
09-20
通过编程逻辑，系统可以根据预设的考场数量，结合学生的个人信息和考试需求，快速生成合理的考场布局。这不仅提高了工作效率，还大大降低了人为错误的可能性。 接下来，我们关注“导入列表”这一功能。在学生注册...
小型的个人网页制作-个人主页简介
04-04
例如，使用`display: flex`或`grid`可以创建灵活的布局，`media queries`可以实现不同设备上的适配，确保网页在手机、平板电脑和桌面电脑上的显示效果良好。 6. **响应式设计**： 为了确保个人主页在不同设备上都...
Flex+Asp.net网络硬
05-30
在本项目中，Flex可能被用来设计和实现用户界面，包括文件管理的布局、按钮、列表视图和其他交互元素。 **Asp.NET MVC技术详解：** Asp.NET MVC（Model-View-Controller）是微软提供的一个用于构建可测试和可维护的...
flex布局总结
qq_41831345的博客
12-23 157
今天只谈样式，不谈逻辑 阮老师的flex布局看了很多遍了，是每次开发，每次都需要看一遍的那种，但是还有有些问题没有用最完美的方法去解决。深究其原因，是因为没有真正的理解。也许有人会说，样式又不是逻辑，需要个鸟的理解？今天写这篇文章，目的就是希望自己写完之后，再次遇到千变万化的手机端样式调配问题，我不需要再去看任何文档，很熟练的去应付。 代码很简单 index.html <!DOCT...
微信小程序 display: flex 与inline-flex的区别以及应用
weixin_43787178的博客
02-20 1965
讲到这个得从wxss的鼻祖css说起了。 一般会将html元素分为两种，即块级元素和行内元素。 一.块级元素:block element 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素； 说白了就是：就是一个四方块，可以放在页面上任何地方；好像一个段落，如果不另...
使用inline-flex让容器自适应宽度
weixin_33786077的博客
12-10 1137
想必flex大家都不陌生，但是你知道还有一种布局叫inline-flex吗？ inline-flex和flex的区别很简单，除了inline-flex可以让容器根据子元素内容的宽高自适应容器的宽度外，其他和flex几乎一模一样。 flex默认使容器占据一整行宽度，高度根据子元素自适应。inline-flex宽高均由子元素自适应，特别适合做...
HTML5基础加强css样式篇（伸缩容器的简介和声明：display:flex||inline-flex）(五十一)
余正源的博客
04-24 2193
1为什么要有伸缩容器：    1. 使用浮动布局，无法实现等高    2.不能很快的调整DOM的顺序    3.不能很好控制子元素的位置 2.如何声明一个伸缩容器：   display:flex; .layout-box { width: 600px; height: 300px;
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 457
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1104
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 344
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 512
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 478
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
主流布局 flex布局
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值