参考： https://www.cnblogs.com/hellocd/p/10443237.html
1，管理系统的flex布局，ant-layout 控制大布局，连写has-sider改变direction-row 2，原图，flex:auto，帮助扩展剩下的，display;flex帮助下面的用flex：auto扩展，所以display和block差不多，但有flex：auto帮助他吃完，说到底两个盒子就是帮他扩展右边和下边，边界是浏览器的100% 延伸：container
grid和flex区别是什么？ Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。Grid 是二维布局系统，通常用于整个页面的规划。flex布局和grid布局是现在的主流的两种布局方式。二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局
<template> <div class="listViewTop"> <img :src="playlist.coverImgUrl" alt="" class="bg" /> <div class="listViewTopNav"> <div class="back" @click=&
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim
1. 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main e
一，上固定，下自适应 1，代码 <div class="all"> <div class="top">111</div> <div class="center">222</div> </div> <style> .all { width: 100%; height: 100%; display: flex; fle
本文总结下面试中常被问到的 css 问题。 BFC 盒模型中对一个元素设置css需要元素是block类型还是inline类型。BFC就是用来格式化块级（block）盒子，还有管理inline类型的盒子IFC，以及其他的FC。FC（Formatting Context)指页面中的一个渲染区域并且拥有一套渲染规则（决定了其他子元素如何定
一、CSS学习网站 Flex Box 冒险游戏 网址：Flex Box 冒险游戏[1] 简介：这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 Flex 的真实应用场景 Flex Box 冒险游戏 2. Flexbox 格子骑士 网址：Flexbox 格子骑士[2] 简介：这个游戏能帮助你学习不同
整合模块 整合"我的"页面 导入模块 导入页面代码 <template> <view> <view class="my-header"> <view class="my-header__background"> <image src="../../../static/VCG211275464206.webp" mode="">&
<div class="txt"> <div class="txt_t">跳过</div> <div class="txt_t" style="margin-left: .13rem;">5s</div></div>css: .txt{ display: flex; align-items: baseline center;// 正常为了内
view: <view class="order"> <view class="content_"> <view class="title"> <view>订单编号：2018041729873019</view> <text>已配送</text> </view>
flex布局： 描述：flex是弹性布局 用来为盒子模型提供最大的应用以及最大的灵活，任何一个容器都可以指定flex布局 语法介绍:display:flex; 表示设置当前容器为弹性盒子，此时容器内部的float。clear，，，，，样式失效 引入两个名词：容器和项目 容器：添加了display：flex的元素 项目：容器中直接子元素
<template> <view class="content"> <web-view id="tq-view" src="https://widget-page.qweather.net/h5/index.html?md=012346&bg=1&lc=accu&key=7b9bf0a2b0064edbb77ecf758c8034f3&v=_1650194718744">&
CSS aspect-ratio All In One <div class="row"> <div style="--ratio: 4 / 3;" class="item">4:3</div> <div style="--ratio: 2 / 3;" class="item">2:3</div> </div> .row {
给父容器after或者before（适用于每行3或者4列） .box:after { display:block; content:""; width: 32%; height:0px; } 如果两行的，width:50%; 改为百分之五十. 转 ：https://blog.csdn.net/qq_38057434/article/details/108746033
Flex学习 一 Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-we
一. HTML简介 一、网页 1.1、网页组成 网页是由: 文字,图片,输入框,按钮,视频,音频....元素组成的总结：网页就是由HTML组成的 1.2、网页规范/web标准构成 1、结构标准：网页按照HTML的标准结构去写网页2、表现标准：用来美化网页css3、行为标准：用js来实现网页中的动作处理 二、为什么要
在平常前端开发中，常见的开发布局flex布局，常见的布局有这个样子，这个是可以用css进行修改，但是今天分享一个简单的方法 这种布局的话，如果是偶数的话可以用flex的 justify-content: space-between;，但是如果像上面五个那样的就回出现下面的这种情况，使用gap就可以更简单的进行
小程序实现电影院选座问题 首先数据库建立 电影票关联影厅，座位同样关联影厅。 使电影票：影厅：座位信息成为1：1：n 根据电影票获取影厅 根据获取影厅的id获取影厅对应的座位信息（因为数据超过20条，所以使用云函数来获取） 云函数： 获取到座
环境 uniapp(vue3) vite 问题描述 把canvas放在自定义组件里，然后将其迎入到其他组件使用时在微信小程序端不显示 解决方法（可能造成的原因） 没有写canvas-id uni.createCanvasContext方法没有传入组件实例（单独作为组件引入时,vue2为this,vue3为getCurrentInstance（）） ca
开启flex布局 display:flex; 开启后 一、上级元素有6个属性 flex-direction：主轴方向（row默认值，主轴为水平方向，起点左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿） flex-wrap：nowarp默认不换行；wrap换行，第一行在
CSS初始化 移动端CSS初始化推荐使用normalize.css http://necolas.github.io/normalize.css/ CSS3盒子模型box-sizing 传统模式宽度计算：盒子的宽度=CSS中设置的width + border + padding CSS3盒子模型：盒子的宽度=CSS中设置的width里面包含了border和padding CSS3盒子模型中，paddi
pages.json "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "
