Can't padding flex layout do not broken width columns? - html

Question

I have two the problem:
First: I can't padding or margin .card element. I want to add space between each card without broken columns.
It set width: 33.333%, change padding or margin of card element, it will be broken to 2 elements in one rows.
Second, I want to add a link to .card. Mean: if the user clicks in one of the 3 cards, it will open.
Currently, I must add <a href=""> to each span, img,... Lost time and broken CSS.
Here my example code:
.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">
<!-- … -->
</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">
<!-- … -->
</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">
<!-- … -->
</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

First: give your cards some margin (I used margin: 0 5px for 5px on the left and right) then set its width to width: calc(33.333% - 10px); where the 10px is both margins added together.
Second: Simply make your card an anchor tag <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">
<!-- … -->
</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">
<!-- … -->
</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">
<!-- … -->
</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 -->

Answer 2

You can add padding, you just need to also set the box-sizing css to border-box
.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: 15px;
box-sizing: border-box;
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">
<!-- … -->
</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">
<!-- … -->
</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">
<!-- … -->
</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 -->