2 Câu hỏi: Bố cục Flexbox với hai cột trên máy tính để bàn và một cột trên thiết bị di động

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Bố cục đơn giản với câu hỏi flexbox:

Yêu cầu bố trí màn hình

  • Hai cột phản hồi
  • Cột thứ nhất với 30% chiều rộng
  • Cột thứ 2 với 70% chiều rộng

Yêu cầu bố trí trên thiết bị di động

  • Cột phản hồi đơn
  • Hàng thứ nhất với chiều rộng 100% (đây là cột đầu tiên trên Máy tính để bàn)
  • Hàng thứ 2 với chiều rộng 100% (đây là cột thứ 2 trên Máy tính để bàn)

Những gì tôi đã có cho đến nay:

Khi tôi chuyển sang mobile (ví dụ như nhấp vào nút trên đoạn trích bên dưới), tôi đặt flex-direction: column trên hộp chứa flex. Nó dường như làm việc.

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

LƯU Ý:

Câu hỏi này là về những thuộc tính hộp flex CSS nào cần được thay đổi để chuyển từ Bố cục màn hình sang Bố cục di động. Đây không phải là về cách phát hiện kích thước cửa sổ hoặc cách đặt truy vấn phương tiện. Tôi xin lỗi nếu cách tôi viết nó không làm cho nó rõ ràng.

CÂU HỎI

Có cách nào sạch hơn để làm điều này không? Tôi có cần đặt thuộc tính flex của flexItems của 100% thành 30% khi ở chế độ di động hay không, tôi có thể đặt chúng ở chế độ di động không

70%
    
0
  1. sử dụng truy vấn phương tiện để chuyển sang flex-direction là một cách xử lý tốt tôi đoán ...
    2019-05-08 16: 37: 41Z
  2. Cảm ơn! Mặc dù tôi không sử dụng truy vấn phương tiện truyền thông. Nhưng câu hỏi của tôi liên quan đến các thuộc tính CSS của flexbox bố cục mỗi lần (như, làm thế nào để đặt các thuộc tính flex theo cách thích hợp để đạt được điều đó). Bất kể tôi đang triển khai chuyển đổi từ thiết bị di động sang máy tính để bàn như thế nào.
    2019-05-08 17: 00: 40Z
  3. truy vấn phương tiện sẽ đơn giản ... đây là một giải pháp sử dụng gói flex bằng cách sử dụng column đối với điểm dừng di động codepen.io/anon/pen/MRNoZz
    2019-05-08 17: 28: 25Z
2 Câu trả lời                              2                         

Vì bạn không có bất kỳ chuyển đổi cột lạ nào từ thiết bị di động sang máy tính để bàn, điều tôi nên làm là đây (và tôi tin là cách sạch nhất)

Bắt đầu nghĩ về thiết bị di động trước tiên (thực tế tốt nhất trước tiên trên thiết bị di động) và sau đó sử dụng truy vấn phương tiện cho phiên bản máy tính để bàn. Về cơ bản đặt thùng chứa của bạn thành khối hiển thị và đặt chiều rộng của cả hai cột bên trong nó thành 100%. sau đó trên máy tính để bàn, làm cho container của bạn linh hoạt với một truy vấn.

CSS:

function App() {
 
  const [mobile,setMobile] = React.useState(false);
    
  return(
  <React.Fragment>
    <div id="flexContainer" style={mobile ? {flexDirection: 'column'} : null}>
      <div id="flexItem1">Item 1</div>
      <div id="flexItem2">Item 2</div>
    </div>
    <button onClick={()=>setMobile(prevState=>!prevState)}>Toogle</button>
  </React.Fragment>
  );
}


ReactDOM.render(<App/>, document.getElementById('root'));
#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Hoặc như tôi sẽ làm trong SCSS:

flex-direction: column     
1
2019-05-08 17: 20: 47Z
  1. Cảm ơn! Và bạn sẽ làm gì về tỷ lệ flexItems? Tôi cần cột đầu tiên là 30% và cột thứ hai là 70%.
    2019-05-08 17: 25: 07Z
  2. @ cbdev420 này. Tôi nghĩ rằng trong trường hợp này, bạn cần phải đọc tràn ngăn xếp này bài . Ngoài ra, hãy cố gắng tránh id làm cơ sở cho css. Quy tắc chung: id là để lấy cái này với js /Reac, v.v., các lớp dành cho kiểu dáng.
    2019-05-09 12: 03: 48Z

Bạn có thể sử dụng điểm dừng với các thành phần được tạo kiểu.

    

0
2019-05-08 17: 15: 47Z
flex-basis
nguồn đặt đây