html - padding flex layout 不能打破宽度列吗？

Question

我有两个问题:

首先:我不能填充或边距 .card元素。我想在每张卡片之间添加空间，而不用破坏列。它设置宽度:33.333% , 更改 card 的填充或边距元素，它将被分解为一行中的 2 个元素。

其次，我想添加一个链接到.card .意思是:如果用户点击 3 张卡片中的一张，它将打开。

目前，我必须添加 <a href="">每个 span , img ,...浪费时间和损坏的 CSS。

这里是我的示例代码:

.card-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;
  padding: 5px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: left;
  padding: 0 0 15px 0;
  width: 33.333%;
  background: #ecf0f1;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.card__image {
  position: relative;
  width: 100%;
  display: block;
  height: 125px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.card__image:hover {
  cursor: pointer;
}
.card__image:hover:after {
  bottom: 0;
  color: white;
  transition: all 0.15s;
}
.card__image:hover .image-overlay {
  background-color: rgba(35, 155, 55, 0.33);
  transition: all 0.15s;
}
.card__image:after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4em;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  font-size: 1em;
  text-align: center;
  content: "\f00c";
  color: rgba(255, 255, 255, 0);
  color: #fff;
  transition: all 0.15s;
}
.card__image .image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 125px;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba 255, 255, 255, 0;
  transition: backgroundColor, 0.15s;
}
.card__image img {
  display: block;
  width: 100%;
}

.card__actions {
  font-family: serif;
  font-size: 25px;
  line-height: 12px;
  color: #a3a3a3;
  text-align: right;
  padding: 0 8px 0 0;
  margin: 0;
}

span {
  display: block;
  border-radius: 3px;
  margin: 0.5em 0.5em 0 0.5em;
  color: #88888b;
}

span.line {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0.5em 0.5em;
  text-align: center;
}

span._short1 {
  color: #fff;
  background: linear-gradient(to right, #1f4037, #99f2c8);
}

span._short2 {
  color: #fff;
  background: linear-gradient(to right, #fc4a1a, #f7b733);
}

span._short3 {
  color: #fff;
  background: linear-gradient(to right, #ec008c, #fc6767);
}

<div class="card-container card--fixedWidth">
   <div class="card">
    
    <div class="card__image" id="card-1">
      <div class="image-overlay">
      </div>
      <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
      <span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
    </div>
    
  </div><!-- /.card -->
  
   <div class="card">
    
    <div class="card__image" id="card-2">
      <div class="image-overlay">
      </div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short2">Get link hdonline</span>
      <span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
    </div>
    
  </div><!-- /.card -->
  
  <div class="card">
    
    <div class="card__image" id="card-3">
      <div class="image-overlay">
      </div>
      <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short3">Emotion đẹp Facebook</span>
      <span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
    </div>
    
  </div><!-- /.card -->
 
</div><!-- /.card-container -->

Answer 1

首先:给你的卡片一些边距(我用 margin: 0 5px 左右 5px)然后将它的宽度设置为 width: calc(33.333% - 10px);其中 10px 是两个边距加在一起。

第二:简单地让你的 card一个 anchor 标签 <a> .

.card-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;
  padding: 5px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: left;
  padding: 0 0 15px 0;
  margin: 0 5px;
  width: calc(33.333% - 10px);
  background: #ecf0f1;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.card__image {
  position: relative;
  width: 100%;
  display: block;
  height: 125px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.card__image:hover {
  cursor: pointer;
}
.card__image:hover:after {
  bottom: 0;
  color: white;
  transition: all 0.15s;
}
.card__image:hover .image-overlay {
  background-color: rgba(35, 155, 55, 0.33);
  transition: all 0.15s;
}
.card__image:after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4em;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  font-size: 1em;
  text-align: center;
  content: "\f00c";
  color: rgba(255, 255, 255, 0);
  color: #fff;
  transition: all 0.15s;
}
.card__image .image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 125px;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba 255, 255, 255, 0;
  transition: backgroundColor, 0.15s;
}
.card__image img {
  display: block;
  width: 100%;
}

.card__actions {
  font-family: serif;
  font-size: 25px;
  line-height: 12px;
  color: #a3a3a3;
  text-align: right;
  padding: 0 8px 0 0;
  margin: 0;
}

span {
  display: block;
  border-radius: 3px;
  margin: 0.5em 0.5em 0 0.5em;
  color: #88888b;
}

span.line {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0.5em 0.5em;
  text-align: center;
}

span._short1 {
  color: #fff;
  background: linear-gradient(to right, #1f4037, #99f2c8);
}

span._short2 {
  color: #fff;
  background: linear-gradient(to right, #fc4a1a, #f7b733);
}

span._short3 {
  color: #fff;
  background: linear-gradient(to right, #ec008c, #fc6767);
}

<div class="card-container card--fixedWidth">
   <a href="#" class="card">
    
    <div class="card__image" id="card-1">
      <div class="image-overlay">
      </div>
      <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
      <span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
    </div>
    
  </a><!-- /.card -->
  
   <a href="#" class="card">
    
    <div class="card__image" id="card-2">
      <div class="image-overlay">
      </div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short2">Get link hdonline</span>
      <span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
    </div>
    
  </a><!-- /.card -->
  
  <a href="#" class="card">
    
    <div class="card__image" id="card-3">
      <div class="image-overlay">
      </div>
      <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short3">Emotion đẹp Facebook</span>
      <span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
    </div>
    
  </a><!-- /.card -->
 
</div><!-- /.card-container -->