CSS Tailwind – flex 1 1 auto

Bạn đang xem : flex 1 1 auto

Các tiện ích để kiểm soát cách các mục flex phát triển và thu nhỏ.

Cách sử dụng cơ bản

Sử dụng flex-initial để cho phép một mục flex thu nhỏ nhưng không phát triển, có tính đến siz ban đầu của nó e:

01

02

03

  

& lt;

div

class

=

"

flex

"

& gt;

& lt;

div

class

=

"

flex-none w -14 h-14

"

& gt;

01

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-Initial

w-64 ...

"

& gt;

02

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-Initial

w-32 ...

"

& gt;

03

& lt; /

div

& gt;

& lt; /

div

& gt;

Flex 1

Sử dụng flex-1 để cho phép một mục flex phát triển và thu nhỏ khi cần thiết, bỏ qua kích thước ban đầu của nó:

01

02

03

  

& lt;

div

lớp

=

"

flex

"

& gt;

& lt;

div

class

=

"

flex-none. ..

"

& gt;

01

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-1

w-64 ...

"

& gt;

02

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-1

w-32 ...

"

& gt;

03

& lt; /

div

& gt;

& lt; /

div

& gt;

Sử dụng flex-auto để cho phép một vật linh hoạt phát triển và thu nhỏ, có tính đến kích thước ban đầu của nó:

01

02

03

  

& lt;

div

class

=

"

flex ...

"

& gt;

& lt;

div

class

=

"

flex-none. ..

"

& gt;

01

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-auto

w-64 ...

"

& gt;

02

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-auto

w-32 ...

"

& gt;

03

& lt; /

div

& gt;

& lt; /

div

& gt;

Sử dụng flex-none để ngăn không cho mục flex phát triển hoặc co lại:

01

02

03

  

& lt;

div

class

=

"

flex ...

"

& gt;

& lt;

div

class

=

"

flex-none w -14 h-14 ...

"

& gt;

01

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-none

...

"

& gt;

02

& lt; /

div

& gt;

& lt;

div

class

=

"

flex-1. ..

"

& gt;

03

& lt; /

div

& gt;

& lt; /

div

& gt;

Áp dụng có điều kiện

Di chuột, lấy nét và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng công cụ sửa đổi biến thể. Ví dụ: sử dụng hover: flex-1 để chỉ áp dụng tiện ích flex-1 khi di chuột.

  

& lt;

div

class

=

"

flex-none

hover: flex-1

"

< p class = "dấu chấm câu"> & gt;

& lt; /

div

& gt;

Để có danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem Di chuột, Tiêu điểm & amp; Tài liệu khác của các Quốc gia .

Điểm ngắt và truy vấn phương tiện < / p>

Bạn cũng có thể sử dụng công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt đáp ứng, chế độ tối, ưu tiên giảm chuyển động, v.v. Ví dụ: sử dụng md: flex-1 để áp dụng tiện ích flex-1 chỉ ở kích thước màn hình trung bình trở lên.

  

& lt;

div

class

=

"

flex-none

md: flex-1

"

< / p>

& gt;

& lt; /

div

& gt;

Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng , Chế độ tối các công cụ sửa đổi truy vấn phương tiện khác .

Sử dụng các giá trị tùy chỉnh

< h3 class = "group flex whitespace-pre-wrap -ml-4 pl-4" id = "customizing-your-theme">

< p> Tùy chỉnh chủ đề của bạn

Theo mặc định, Tailwind cung cấp bốn tiện ích flex . Bạn có thể tùy chỉnh các giá trị này bằng cách chỉnh sửa theme.flex hoặc theme.extend.flex trong tệp tailwind.config.js của mình.

tailwind.config.js

  

mô-đun

.

xuất

=

{

chủ đề

:

{

mở rộng

:

{

flex

:

{

'2'

:

'2 2 0%'

}

}

}

}

Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu tùy chỉnh chủ đề .

Các giá trị tùy ý

Nếu bạn cần sử dụng giá trị flex một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo thuộc tính nhanh chóng bằng cách sử dụng bất kỳ giá trị tùy ý.

  

& lt;

div

lớp

=

"

flex- [2_2_0%]

"

& gt;

& lt; /

div

& gt;

Tìm hiểu thêm về hỗ trợ giá trị tùy ý trong tài liệu giá trị tùy ý .


Xem thêm những thông tin liên quan đến chủ đề flex 1 1 auto

flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки

  • Tác giả: Просто: разработка
  • Ngày đăng: 2019-08-21
  • Đánh giá: 4 ⭐ ( 4759 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки
    Привет! Сегодня мы рассмотрим свойства flex-basis, flex-grow и flex-shrink из модуля flexbox, а так же их сокращённую запись – flex. После просмотра этого видео вы будете знать, как работает каждое из этих свойств, какие значения оно может принимать. верстка сайта состоит из блоков, которые должны сжиматься / расширятся, иногда обладают базовым размером. Раньше этого можно было добиться только с помощью процентов и нужно было вычислять отступы. С помощью отдельных свойств флексбокс можно настроить так, чтобы это делалось автоматически.
    flexbox уроки с подробным описанием всех свойств на канале!

    =======================================

    Telegram
    Канал – https://t.me/prostorazrabotka
    Чат – https://t.me/prostorazrabotkachat

    =======================================

    Подписывайтесь в соц. сетях:
    Facebook – https://www.facebook.com/vitaliy.kirenkov
    VKontakte – https://vk.com/vitaliy.kirenkov
    LinkedIn – https://www.linkedin.com/in/kirenkov
    Twitter – https://twitter.com/VitaliyKirenkov
    Instagram – https://www.instagram.com/vitaliy.kirenkov

    =======================================

    Мой второй канал:
    https://www.youtube.com/channel/UC-QLh1F3Rzp6HY-FW1E3Eaw

    =======================================

    Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только.
    Больше информации обо мне: http://kirenkov.me/

    ityoutubersru

Using flex: 1 auto;

  • Tác giả: stackoverflow.com
  • Đánh giá: 3 ⭐ ( 4028 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

flex:1 到底代表什么?