CSS流动布局-页面自适应

王帆 2023-03-28 原文

项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，如下：

该页面会随着页面的放大缩小而随之发生变化，解决方法：display: flex;配合子元素的动态宽度来实现，子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。

.box{
    border: 1px solid red;
    width: 80%;
    display: flex;
    direction: ltr; 
    flex-wrap: wrap;
    padding: 2px;
    .innerBox{
        width: calc((100% - 12px) / 3);  /* 宽度 = (总宽 - 自身的margin) / 每行3个 */
        height: 50px;
        border-radius: 10px;
        margin: 2px;
        background: #ccc;
    }
}

在css中有一个“流”的概念，这种布局自然自动，像水流一样。正常情况下，html的元素布局是从左往右依次排列，块级元素从上往下排列，我们所说的脱离文档流也就是该元素从流中漂浮起来，与之前的元素不在同一个层级而形成的不占位效果。

有了流这个概念后，我们可以通过更改流的水平流向来更改元素的排列方向。
direction属性用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右。

direction属性介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction

对应上面的flex布局，通过设置文档的水平流向来更改文档的起始位置：

 direction: rtl;

如果是行内元素，只需要更改水平流向即可实现元素的左右对齐。

.container{
    width: 348px;
    border: 1px solid red;
    direction: rtl;  /*文档水平流向 从右流向:rtl 从左流向:ltr*/
    padding: 10px 10px 0px 0px;
    >button{
        margin-inline-end: 10px;
        margin-block-end : 10px;
    }
}

margin-inline-end用于定义元素的逻辑内联结束边距。

这里需要注意，margin-inline-end是受direction属性影响的，如果文档的水平流向为右向左，那么
margin-inline-end相当于margin-right
margin-inline-start相当于margin-left
如果文档的水平流向为左向右，那么
margin-inline-end相当于margin-left
margin-inline-start相当于margin-right

direction: ltr;  /*文档水平流向 从右流向:rtl 从左流向:ltr*/
/*....*/
    >button{
       margin-inline-start: 10px;
       margin-block-end : 10px;
    }

margin的逻辑属性是围绕inline、block、start、end展开的
inline、block表示方向，inline表示水平（左右），block表示垂直（上下）
start、end表示起止方位，start表示开始位置（左），end表示结束位置（右）
上面的几种逻辑属性都会受到direction属性影响，使用时需要注意。

margin、padding都可以通过inline、block、start、end组合变为css逻辑属性。
padding-inline-start: 20px;margin-inline-start: 20px; ............

流的应用除了更改文档的水平流以外，还可以用来做对称布局，例如微信聊天页，更改direction的水平流向，即可实现微信的自身和对方的聊天气泡定位。

<!-- 微信聊天页 -->
<div class="wx_chat">
     <div class="wx_chunk" v-for="(item,index) in 3">
         <div class="wx_image">头像</div><span>用户昵称</span>
     </div>
     
     <div class="my_wx_chunk">
         <div class="wx_image">我的头像</div><span>用户昵称</span>
     </div>
</div>
<!-- 微信聊天页end -->

.wx_chat{
    width: 300px;
    border: 1px solid cyan;
    margin: 20px;
    .wx_chunk{
        display: flex;
        .wx_image{
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid red;
        }
    }
    .my_wx_chunk{
        direction: rtl;  /* 更改水平流向为向右 */
        display: flex;
        .wx_image{
        width: 50px;
        height: 50px;
        font-size: 12px;
        text-align: center;
        line-height: 50px;
        border: 1px solid red;
        }
    }
}

效果如下：

案例源码：https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~

有关CSS流动布局-页面自适应的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - nanoc 和多种布局 - 2
是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 在 ASP 页面上 Mechanize 中断 - 2
require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie
ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2
我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.
ruby - 每个页面上的 Jekyll 分页 - 2
据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？最佳答案如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
ruby-on-rails - RoR && "coming soon"页面 - 2
我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

CSS流动布局-页面自适应

有关CSS流动布局-页面自适应的更多相关文章

随机推荐