為 CSS 中的可重用組件分配寬度和 alignment

Question

我正在研究一個可重用的布局，左邊有一些文本，右邊有一個圖像，下面是我擁有的簡單 css 代碼。

我將為用戶提供為正文/描述分配寬度和 alignment 的靈活性。 如果用戶在沒有圖像的情況下傳遞這兩個屬性，我想重用下面的代碼來設置寬度和 alignment，我正在嘗試找出方法。

我可以簡單地為 flexboxtext class 分配一個樣式，寬度為 100%，並將 alignment 設置為描述的 h4 標簽，還是有其他方法可以解決這個問題？

 .flexboxcontainer { display: flex; gap: 400px; .flexboxtext { width: 30% }.flexboximage { margin-top: 50px; } } <div class="flexboxcontainer"> <div class = "flexboxtext"> <h1 id="headline">Welcome to the test page</h1> <h2 id="subheadline">This is a sub headline</h2> <h4 id="description"><p>This is a description of the page</p></h4> </div> <div class = "flexboximage"> <img src="https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772243_960_720.jpg?width=20px;height=20px;" </div> </div>