弹性盒子布局 Flexbox Layout

这篇具有很好参考价值的文章主要介绍了弹性盒子布局 Flexbox Layout。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

弹性盒子布局 Flexbox Layout,python,html,css

弹性盒子布局 Flexbox Layout,python,html,css
可以嵌套下去

弹性盒子布局 Flexbox Layout,python,html,css
1.display 属性
默认行排列

<style>
    .flex-item{
height: 20px;
    width: 10px;
    background-color: #f1f1f1;
    margin: 10px;
    }
   
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>

此时是 列拍
弹性盒子布局 Flexbox Layout,python,html,css

<style>
    .flex-item{
height: 20px;
    width: 10px;
    background-color: #f1f1f1;
    margin: 10px;
    }
     .flex-container{
    display:flex;}  
  </style>

弹性盒子布局 Flexbox Layout,python,html,css

flex-direction属性——行布局 row
弹性盒子布局 Flexbox Layout,python,html,css
列布局:column
弹性盒子布局 Flexbox Layout,python,html,css

flex-wrap 属性 折叠弹性盒子布局 Flexbox Layout,python,html,css

flex-flow属性
包括 flex-direction 和flex-wrap

flex-flow: row wrap
行排列 折叠
弹性盒子布局 Flexbox Layout,python,html,css

justify-content属性 元素在主轴上的对齐方式弹性盒子布局 Flexbox Layout,python,html,css
左对齐 居中对齐 右对齐

弹性盒子布局 Flexbox Layout,python,html,css

两端对齐 拉手对齐

align-items属性 元素在辅轴上的对齐方式
弹性盒子布局 Flexbox Layout,python,html,css
上端对齐 居中对齐 底部对齐

align-items: stretch
注意:去掉元素高度

<style>
    .flex-container {
    display: flex; /* 转成flex格式*/
    justify-content: space-between; /*元素在主轴上的对齐 两端对齐 */
    flex-direction:row; /*行排列*/
    align-items:stretch; /*如果项目未设置高度或设为auto,将占满整个容器的高度。 */
    width:500px;
    height:200px;
    border:1px dashed;/* 虚线*/
    }
    .flex-item {
    width:100px;
    border:1px solid;
    font-size:20px}
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

弹性盒子布局 Flexbox Layout,python,html,css

 <style>
    #flexbox{
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid ;
flex-direction:row; /*行排列*/

width:200px;
    height:200px;
    }
    #flexitem{
    width:100px;
height:100px;
    border:1px solid red;
    background-color:red;
    }

flex-grow属性 元素被拉大的比例,按比例分配容器剩余空间 (1)默认值为0: 元素不占用剩余空间
(2)取值为n: 元素占据剩余空间若干份中的n 份

<style>
    .flex-container {
    display: flex; /* 转成flex格式*/

    flex-direction:row; /*行排列*/
    align-items:stretch; /*如果项目未设置高度或设为auto,将占满整个容器的高度。 */

    }
    .flex-item { border:1px solid black; }
    div:nth-child(1) { flex-grow:1; } /* 设置第一个项目比例为1份 */
    div:nth-child(2) { flex-grow: 1; } /* 设置第二个项目比例为1份*/
    div:nth-child(3) { flex-grow: 2; } /* 设置第三个项目比例为2份 */
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
</body>

弹性盒子布局 Flexbox Layout,python,html,css

弹性盒子布局 Flexbox Layout,python,html,css
弹性盒子布局 Flexbox Layout,python,html,css
弹性盒子布局 Flexbox Layout,python,html,css

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   *{
	margin: 0;
	padding: 0;
}
    #container{
    margin:0 auto;
	width:500px;
	height:400px;
    }
    #header{
    display:flex;
    flex-direction:row;/* 行排列*/
    justify-content:center;/* 水平居中*/
    align-items:center;/* 垂直居中*/
    border:1px solid black;
    font-size:30px;
    color:white;
    background-color:purple;
    margin-bottom:5px;
    weight:500px;
    height:100px;}
    #main{
    margin-bottom:10px;
    weight:500px;
    }
    #left{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
    float:left; /* 左浮动*/
    width:240px;
    height:200px;
    margin-right:10px;
    background-color:#ccc;
    font-size:20px;
    }
    #right{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
    float:left; /* 左浮动*/
    width:240px;
    height:200px;

    background-color:#ccc;
    font-size:20px;
    }
     #footer{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
float:left; /* 左浮动*/
    width:490px;
    height:100px;
    margin-top:10px;
    background-color:#ccc;
    font-size:20px;
    }

    p{font-size:15px; margin-top:10px; }
  </style>
</head>
<body>
<div id="container">
  <div id="header">web前端开发
  </div>
  <div id="main">
    <div id="left">HTML<p>超文本标记语言,用于构建网页结构,定义网页包括的内容.</p></div>
    <div id="right">CSS <p>层叠样式表,用于构建网页布局,外观,美化页面</p></div>
  </div>
  <div id="footer">JavaScript <p>JavaScripe,脚本语言,用于构建网页行为,与用户进行交互,使用户获得更好的体验</p></div>
</div>
</body>

这是用flex布局写得 更简单点

弹性盒子布局 Flexbox Layout,python,html,css文章来源地址https://www.toymoban.com/news/detail-840327.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 整体容器样式 */
        #container {
            margin: 0 auto;
            width: 500px;
            height: 400px;
            display: flex;
            flex-direction: column;/*垂直方向为列布局*/
            align-items: center;/*  在主轴方向(垂直方向)上居中对齐容器内部元素 */
        }

        /* 顶部标题样式 */
        #header {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;  /* 垂直居中对齐*/
            border: 1px solid black;
            font-size: 30px;
            color: white;
            background-color: purple;
            margin-bottom: 5px;
        }

        /* 主体内容区样式 */
        #main {
            display: flex;
            justify-content: space-between; /*两端对齐*/
            width: 100%;
            margin-bottom: 10px;
        }

        /* 左侧内容块样式 */
        #left {
            flex: 1; /*flex-grow, flex-shrink, 和 flex-basis*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 240px;
            height: 200px;
            margin-right: 10px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 右侧内容块样式 */
        #right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 240px;
            height: 200px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 底部内容样式 */
        #footer {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 10px;
            background-color: #ccc;
            font-size: 20px;
            height: 100px;
        }

        p {
            font-size: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <!-- 顶部标题 -->
    <div id="header">web前端开发
    </div>
    <!-- 主体内容区 -->
    <div id="main">
        <!-- 左侧内容块 -->
        <div id="left">HTML<p>超文本标记语言,用于构建网页结构,定义网页包括的内容.</p></div>
        <!-- 右侧内容块 -->
        <div id="right">CSS <p>层叠样式表,用于构建网页布局,外观,美化页面</p></div>
    </div>
    <!-- 底部内容 -->
    <div id="footer">JavaScript <p>JavaScripe,脚本语言,用于构建网页行为,与用户进行交互,使用户获得更好的体验</p></div>
</div>
</body>
</html>

到了这里,关于弹性盒子布局 Flexbox Layout的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    需求 : 制作如下搜索栏 ; 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; 然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比

    2024年02月05日
    浏览(57)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(64)
  • Flex 弹性盒子布局

    可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。比如: 容器、项目的理解? 采用

    2024年01月17日
    浏览(59)
  • flex布局(弹性盒子)–详谈2

    这是小编接着flex布局(弹性盒子)–详谈进行续写,帮助各位快速上手熟悉flex布局! flex 属性用于指定弹性子元素如何分配空间。 flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 各个值解析: none:none的计算值为: 0 0 auto [ flex-grow ]:定义弹性盒子元素的扩展比率。

    2024年03月20日
    浏览(49)
  • css3-flex布局:基础使用 / Flexbox布局

    一、理解flex 二、理解Flex布局(又称Flexbox布局) Flex布局(又称Flexbox布局)是一种基于Web的CSS3布局模式,其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目,使得这些项目能够按照一定规则相互排列,并且自动

    2024年02月12日
    浏览(48)
  • 【css】flex弹性盒子

    flex 弹性盒子 在 CSS 中, display: flex 是一种布局模型,用于创建弹性盒子(flexbox)。它定义了一个容器元素及其子元素的布局方式,使其能够更灵活地调整和排列内容。 使用 display: flex 可以将一个容器元素转换为弹性盒子,并控制其中子元素的排列方式、对齐方式以及伸缩行

    2024年02月10日
    浏览(46)
  • css弹性盒子

    2024年03月13日
    浏览(47)
  • CSS:弹性盒子模型详解(用法 + 例子 + 效果)

    flex-direction: row; 横向布局,默认从左向右。 flex-direction: row-reverse; 横向布局,从右向左。 flex-direction: column; 纵向布局,从上到下。 flex-direction: column-reverse; 纵向布局,从下到上。 flex-wrap: wrap; 换行 flex-wrap: nowrap; 不换行 给子级加上 order: 编号 值越小越考前,值越大越向后排。

    2024年02月13日
    浏览(39)
  • HTML布局(HTML Layout)简介

    HTML布局(HTML Layout)简介 HTML布局(HTML Layout)是创建一个网站时需要考虑的情况,合理设计网页中内容的排列方式,让网页看起来更加合理、美观,能产生引人注目的视觉效果。页面布局一般包括: 标题:前端的一部分,用于页面顶部。header标签用于在网页中添加标题部分

    2024年02月08日
    浏览(54)
  • 【CSS 20】website layout 网站布局 页眉 导航栏 列布局 不相等栏 页脚

    website layout 网站布局 header 页眉 页眉(header)通常位于网站顶部(或顶部导航菜单的正下方) 通常包含徽标(logo)或网站名称 navbar 导航栏 导航栏包含链接列表,以帮助访问者浏览您的网站 内容 使用哪种布局通常取决于您的目标用户 最常见的布局是以下布局之一(或将它

    2024年02月13日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包