Asked May 30th, 2018 8:25 AM 105 0 1
  • 105 0 1
0

Nhờ giúp đỡ căn nội dung theo chiều cao trong FlexBox

Share
  • 105 0 1

mình nhờ mọi người giúp mình căn nội dung cột bên phải ra giữa chiều cao với ạ.

https://codepen.io/Hoangvan/pen/dKPyvW

Mình không biết sử dụng thuộc tính nào của Flexbox để làm như vậy

Cám ơn mọi người nhiều

1 ANSWERS


Answered May 30th, 2018 8:34 AM
Accepted
+1

Bạn thêm CSS như sau là được:

.content {
  display: flex;
  align-items: center;
}
Share
Hoang vn @wiliamfeng
May 30th, 2018 9:07 AM

cám ơn bạn nhưng cách này lại làm chữ view - more của mình nổi bên cạnh phần nội dung kia. Mình ko muốn như vậy

+1
| Reply
Share
May 30th, 2018 9:11 AM

@wiliamfeng Bạn chuyển nhưng element con của .content, nhóm vào trong một div.body thành .content > .body, như này: Screenshot from 2018-05-30 16-09-18.png

CSS bạn vẫn dùng như mình nói ở trên.

+2
| Reply
Share
Hoang vn @wiliamfeng
May 30th, 2018 9:49 AM

@huukimit , ok bạn , mình cám ơn bạn nhiều nha

0
| Reply
Share
May 30th, 2018 9:50 AM

@wiliamfeng You're welcome.

+2
| Reply
Share
Hoang vn @wiliamfeng
May 30th, 2018 1:17 PM

@huukimit bạn ơi, mình làm phiền bạn thêm chút nữa, cũng vẫn là FlexBocx nhưng đây là ví dụ khác của mình.

Bạn cho mình hỏi , làm sao để 2 div cuối ( 4 & 5) nó nằm căn chuẩn được ạ ( ý mình muốn : 4 thì nằm thẳng cột với 1 , 5 thì thẳng cột với 2 ).

https://codepen.io/Hoangvan/pen/MXYbjG

Bạn xem giúp mình với nha. Mình cám ơn bạn nhiều

+1
| Reply
Share
May 30th, 2018 3:50 PM

@wiliamfeng Nếu bạn muốn style như trong hình thì có nhiều cách lắm!

.container{
  max-width: 500px;
  border:solid 1px;
  margin-left: 200px;
  display:flex; /** Important **/
  flex-wrap:wrap; /** Important **/
}

.item{
  margin-top: 10px; 
  margin-bottom: 10px;
  margin-left: 10px; /** Important **/
  height: 60px;
  background:red;
  /** calc(100%/columns - (margin_left_size * (columns+1))/columns): VD: columns = 3; margin_left_size = 10px **/
  flex: 0 0 calc(100%/3 - (10px * 4)/3); /** Important **/
}

/** UPDATE 1: Merge into `.item` code block: Thanks to Nguyen Van Hoang
.item + .item, .item:first-child {
  margin-left: 10px;
}
**/

Screenshot from 2018-05-30 22-42-20.png

+1
| Reply
Share
May 30th, 2018 3:54 PM

Nếu bạn cảm thấy câu trả lời đã phù hợp, nhớ click button màu xanh lá cây để resolve câu hỏi này nhé. hihi

+2
| Reply
Share
Vinh Nguyen @vinhnguyen
May 30th, 2018 5:48 PM

Hơi dài dòng chút, nhưng mình thấy cũng ok 😄

https://codepen.io/vinhnguyen261/pen/rKaGeK

+2
| Reply
Share
Hoang vn @wiliamfeng
May 31st, 2018 3:54 AM

@huukimit cám ơn bạn Kim nhiều nhé

+2
| Reply
Share
May 31st, 2018 3:54 AM

@wiliamfeng Không có chi. hihi

+1
| Reply
Share
Hoang vn @wiliamfeng
May 31st, 2018 3:54 AM

@vinhnguyen cám ơn Ngọc Vinh nhiều 😃)

+1
| Reply
Share
Hoang vn @wiliamfeng
May 31st, 2018 8:42 AM

@huukimit mình có thắc mắc này muốn hỏi bạn, tại sao mình không lấy cái margin-left trong đoạn này:

.item + .item, .item:first-child {
  margin-left: 10px;
}

bỏ vào chỗ này:

.item{
  margin-top: 10px; 
  margin-bottom: 10px;
  height: 60px;
  background:red;
  flex: 0 0 calc(100%/3 - (10px * 4)/3);
}

luôn. Tại sao lại phải viết riêng như vậy ? Mình thay thử thì không thấy có gì khác

+2
| Reply
Share
May 31st, 2018 8:47 AM

@wiliamfeng Cái đoạn dưới lúc trước đó mình đang làm cách khác vẫn để đấy thôi. Bỏ nó vào cho gọn đi bạn. (facepalm)

+2
| Reply
Share
Hoang vn @wiliamfeng
Jun 1st, 2018 9:26 AM

vẫn chưa ổn các bạn ạ, nếu mình set max-width cho mỗi item thì hình như lại không được : https://codepen.io/Hoangvan/pen/jKPoOr

0
| Reply
Share
Jun 1st, 2018 9:29 AM

@wiliamfeng Ủa, bạn muốn hiển thị grid như nào mà sao lại set thêm max-width vậy nhỉ?

0
| Reply
Share
Hoang vn @wiliamfeng
Jun 1st, 2018 9:31 AM

@huukimit hi, phát sinh vấn đề là trong item đó của mình có ảnh , mà ảnh thì nó rộng khoảng 300px thôi nên mình phải fix max-width cho item tối đa là 300px để ảnh nó không bị vỡ đó bạn

0
| Reply
Share
Jun 1st, 2018 9:34 AM

@wiliamfeng Vậy thì mình nghĩ bạn cần set max-width cho cái ảnh thay vì set cho item. Vì item là một thành phần trong grid, mỗi item cần cái width đều nhau để vừa khít với container. Cụ thể cái ảnh chỉ được phép max-width = 100% item width.

+1
| Reply
Share
Hoang vn @wiliamfeng
Jun 1st, 2018 9:42 AM

@huukimit thế thì lại không được bạn à, vì như vậy thì ảnh sẽ không rộng hết khung mà => nhìn thế cái khung bị thừa hai bên coi xấu lắm, mình muốn khung chỉ co giãn trong khoảng kích thước tối đa của ảnh thôi. Các bạn giúp mình nhé !

0
| Reply
Share
Hoang vn @wiliamfeng
Jun 2nd, 2018 4:04 AM

bạn nào hỗ trợ mình với ạ

0
| Reply
Share
Jun 2nd, 2018 7:59 AM

Screenshot from 2018-06-02 14-53-11.png

@wiliamfeng Như mình nói ấy bạn, với cách trên bạn nên style max-width cho cái ảnh bên trong .item = 100% item width. Chứ người ta không để max-width cho .item. Như thế sẽ làm cái style grid của bạn không còn nghĩa lý nữa.

Chúc bạn thành công nhé.

+1
| Reply
Share