flex布局实现三栏布局和水平排列

VIP文章 已于 2023-07-06 14:13:16 修改
阅读量1.6k 收藏 6
点赞数 1
文章标签： html css flex css3 html5
于 2021-07-04 21:37:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x20182630/article/details/118443274
版权

三栏布局

注：flex中的flex item(子盒子）默认沿着主轴（main axis）排序。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；默认情况下main axis从左指向右。

利用flex布局，中间模块宽度自适应。

其中flex-grow 属性用于设置或检索弹性盒子的扩展比率。当flex父盒子中的flex item即子div，其中间div设为flex-grow:1,其余两个盒子不用设置，flex-grow默认值为0，即一行中被其余两个盒子占据剩下的空间全部分配给中间盒子。

注释：如果元素不是弹性项目，则 flex 属性无效。

<!DOCTYPE html>
<html>
    <head>
<title></title>
<style>
    *{
        height: 100%;
        margin: 0;
    }
      .wrapper{
          width: 100%;
          height: 100%;
        display: flex;
    }
    
   .left{
       width: 300px;
        background-color: blue;
        text-align: center;
    }
    .main{
        background-color: red;
        flex-grow: 1;
        text-align: center;
    }
    .right{
        width: 300px;
        background-color: green;
        text-alig
最低0.47元/天 解锁文章
x20182630
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序开发中瀑布流布局和图片懒加载
吃不胖.
04-03 541
在loadImage方法中，我们使用wx.createIntersectionObserver来监听.lazy-image元素的相交状态，并判断是否进入可见区域，如果进入则加载图片，并通过setData将数据渲染到页面中。在onReady生命周期中，我们使用wx.createSelectorQuery来获取.lazy-image元素的位置信息，并判断元素是否进入可见区域，如果在可见区域内，则调用loadImage方法加载图片。你可以根据实际需求，自定义瀑布流元素的样式，并调整每列的宽度和间距。
css flex几种多列布局
12-30
基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ flex:1; background: blue; }
flex三列布局
XIAO_A_fighting的博客
07-25 2982
flex布局实现三列响应式的核心点其实就在于对想要具有响应式特性的div设置flex-grow；
用flex实现三栏布局
weixin_46369590的博客
03-28 2480
上述代码中，.container是一个flex容器，flex-wrap属性设置为wrap以使其在需要时换行。justify-content属性设置为space-between以使三个栏目之间有一定的空隙。align-items属性设置为。CSS三栏布局是指将一个网页分为三个栏位，分别为左栏、中栏和右栏。左栏和右栏使用flex-basis属性设置宽度，中栏使用。三个栏目的背景颜色可以根据实际情况进行调整。以使三个栏目的高度相等。
css flex三行布局
hirobacom的博客
06-02 973
css flex三行布局 效果图 数量不足三的倍数： <div class="imgShow"> <div class="img_item" v-for="(item,i) in 5" :key='i'></div> </div> css .imgShow{ width: 100%; display: flex; flex-wrap: wrap; } .img_item{ height:0px; /* height: 8
css三列布局-flex
HAINIHAOya的博客
03-26 2309
css三列布局-flex 相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。  现在给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最
移动端优先的flex三栏布局的使用方法
09-22
felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用... 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法，感兴趣的小伙伴们可以参考一下
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
flex布局Flex实现常见布局的汇总
04-11
然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为两...
css3弹性盒子flex实现三栏布局的实现
01-22
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
css position实现自适应
薄年再无木小白的专栏
01-20 2561
css position实现自适应
10-CSS布局之flex布局
qq_43975332的博客
08-19 767
1 flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 2 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。 每根轴都有起点和终点，这对于元素的对齐非常重要。 弹性容器中的所有子元素称为<弹性元素&gt
web中flex三行布局
扑满大师
11-03 3050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pratise</title> <style> *{padding:0; margin:0;} body,html{display: flex;flex-direction: column; height:
css flex弹性布局 一行三列布局
℡メ㏑╭ァ小凯
12-18 9436
css flex弹性布局 一行三列布局
flex布局
weixin_47410267的博客
03-03 400
flex布局 父元素的属性： 设置父容器 display : flex; flex-direction 设置主轴的方向 flex-direction ： row； row 默认值 从左至右 row-reverse 从右至左 column-reverse | 从下至上 justify-content:设置主轴上子元素的排列方式 flex-start 默认值 flex-end 从尾部开始排列 center 在主轴居中 space-around 平分剩余空间 space-between
flex实现流式布局
banqiaoxian4609的博客
07-03 276
摘自阮老师的博客 点击查看运行效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> ...
html弹性布局三行三列,flex实现三列布局
weixin_31833307的博客
06-18 1487
flex三列布局*{margin:0;padding:0;}#head{width:100%;height:100px;border:1px solid;background-color:red;}#content{width:100%;border:1px solid;display:flex;}#content>.item:nth-child(1){order:2;word-wrap:brea...
flex实现三列布局
NoNamePeople的博客
08-12 1506
flex实现三列布局 .container{ height: 500px; display: flex; background-color: wheat; } .one{ /* flex: 0 1 200px; */ background-color: violet; } .two{ /* 将剩余空间分配给two，独占一份 */ flex: 1; background-co
flex实现三栏布局
最新发布
09-02
`和子元素的相应样式，就可以实现使用flex布局的三栏等分布局。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* [flex实现三栏等分布局]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值