Question

例如我有div，它有flex-basis：33％;

什么原生css-property可以替代＆＃39; flex-basis＆＃39;？

您可以推荐哪些解决方案？

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">1</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">2</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">3</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">4</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 product_preview">5</div>

.product_preview{
   flex-basis:33.333%;
   max-width:33.333%
}

Answer 1

目前还不清楚你的确切效果是什么，但是：

MDN Ref:

基于弹性的CSS属性指定弹性基础，它是弹性项目的初始主要大小。除非使用box-sizing指定，否则此属性确定内容框的大小。

所以，flex-basis基本上是flexbox对min-width（或min-height）的替代，取决于flex-direction但两者不是直接的互换。

这是因为即使一个元素可能有flex-basis: 100px ... flex-shrink/grow属性允许缩小/增长。

但是，如果您在没有flexbox的情况下寻找相同的整体功能，那么据我所知，它在javascript解决方案之外并不存在。

Answer 2

如果您要删除<div class="toolnav"> <div id="tools">Learn More</div> <div id="tools">Sign Up</div> <div id="tools">Find a Task</div> <div id="tools">About Yanoe</div> </div>，可以改为使用flex-basis或width。

这是因为flex-basis的初始值为auto，这意味着

在flex item上指定时，height关键字会检索 main size property的值为已使用的flex-basis。

主要尺寸属性由auto（在行布局中）或width（在列布局中）提供：

flex item的主要尺寸属性是width 或height属性，以主要维度为准。

需要删除属性＆＃39; flex-basis＆＃39;。什么本机css属性可以取代它？

2 个答案: